karatejb: [WebStorm] Create first web application with AngularJS

#AngularJS #WebStorm

▌Introduction

WebStorm is a javascrip IDE from JetBrains.

In this article, we will learn how to setup the environment for AngularJS and also create a directive sample.

▌Settings

▋Editor : Color and fonts …

In Settings

Go to 【Editor】→【Colors & Fonts】 to choose the default IDE scheme or customize them.

Tips :

We can use the Search button on the IDE to search anything include settings.

For example, search “Color scheme” and then choose different color scheme.

▋Enable Version control

Go to Settings →【Version Control】 and set up your familiar version controls.

On main IDE, open 【VCS】 →【Enable Version Control Integration】 and choose what version control you will default use.

Tips :

If you use multiple version controls, just add them in Settings→【Version Control】

▋Install Node.js and bower

If you haven’t install Node.js and bower on your machine, follow the steps to install them.

Install and configure Node.js

Using Bower in WebStorm

▌Implement

Ok, it’s time to write a hello world!

▋Create Empty project

Click 【File】 →【New】→【Project】

There are some default templates in the following step, however, I recommend to create an Empty Project in this time.

▋Install Angular and other packages

We will use bower to install the packages we need.

Go to 【Settings】→【Languages & Frameworks】→【Bower】

There will be a warning message :

“Please correct path to bower.json”

That means that we have to create a bower.json for our project. Open the project’s root directory, and use bower init command to create one.

>bower init

Return to the settings, fill in the bower.json path and add our needed packages.

▋Implement!

Alright, we have all things for writing the application. Construct your application and start coding!

l Html

<div class="form-horizontal" ng-app="app" ng-controller="IndexCtrl">
    <hr>
    <table class="list">
        <thead>
        <tr>
            <td>
                <lable class="control-label">{{title1}}</lable>
            </td>
            <td>
                <lable class="control-label">{{title2}}</lable>
            </td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <input type="text" class="form-control" ng-model="City" city-input/>
            </td>
            <td>
                <input type="text" class="form-control" value="{{City}}" ng-bind="City"/>
            </td>
        </tr>
        </tbody>
    </table>
</div>

l Directive

angular.module('cityInputApp', ['cityapp'])

    .factory('CityQueryFactory', function($http,$q,CityFactory){

    var factory = {};

    factory.GetAll = function () {

        var getAllJob = $q.defer();

        var getAllJobPromise = getAllJob.promise;

        //Call the web api service

        var getPromise = CityFactory.GetAll();

        getPromise.then(function (response) {

            getAllJob.resolve(response.data);

        }).catch(function (e) {

        });

        return getAllJobPromise;

    };

  

    factory.Get = function (id) {

        var getJob = $q.defer();

        var getJobPromise = getJob.promise;

        //Call the web api service

        var getPromise = CityFactory.Get(id);

        getPromise.then(function (response) {

            getJob.resolve(response.data);

        }).catch(function (e) {

        });

  

        return getJobPromise;

    }

    return factory;

})

.directive('cityInput', function ($compile, $filter, CityQueryFactory) {

    var format = function (dataset, id) {

        var name = "";

        angular.forEach(dataset, function (item) {

            if (item.Id == id) {
                name = item.Name;
                return;
            }

        });
        return name;
    };

  

    return {
        //restrict: 'E',
        scope: {
            CityId: "=ngModel", //城市代號
        },
        require: 'ngModel',
        link: function ($scope, $element, $attr, Ctrl) {
            var inputId = "";
            $scope.cities = [];
  
            var getAllPromise = CityQueryFactory.GetAll();
            getAllPromise.then(function (data) {

                $scope.cities = data;
            })

            //convert data from model format to view format
            Ctrl.$formatters.push(function (modelValue) {

                if (modelValue == "") //Don't query while the id(model) is empty
                   return "";
                //Cus the value is from server side, you have to set a promise.
                var getPromise = CityQueryFactory.Get(modelValue);
                getPromise.then(function (data) {
                    var rtn = "";
                    if (data != null) {
                        rtn =  data.Name;
                    }
                    $element.val(rtn);
                    return rtn;
                });

            });  

            /*
             *Change event for the element
             */
            $element.bind("change", function () {
                if (Ctrl.$invalid) return;
                inputId = Ctrl.$modelValue;

                var formattedModel = format($scope.cities, Ctrl.$modelValue);

                //if the formatted value is empty,
                //it means that the input value from user is not correct,
                //So clear the ngModel to make sure that the incorrect value won't be post to back-end.
                if (formattedModel == "") {
                    $scope.CityId = "";
                    $scope.$apply();
                }

                //Change the element's value by the formatted value
                if (formattedModel !== Ctrl.$viewValue) {
                    $element.val(formattedModel);
                }

            });

        }

    }

})

l Controller

var app = angular.module('app',['blockUI','cityInputApp'])

    .controller('IndexCtrl', function($scope){
        $scope.title1 = "Enter the city";
        $scope.title2 = "Hidden real value";
    })