AngularJS的學習筆記(一)

    一、如何在本地發佈AngularJS的api：

        1、本人是用nginx來發布的。

        2、關於docs的放置。本人是直接將docs文件夾複製到nginx的html目錄下，同時，需要將AngularJS的其它js，也直接複製到html的根目錄下。

        3、nginx.conf的server部分的主要配置：       

server {
        listen       80;
        server_name  angular.api;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		location ~ \/docs\/partials\/(.+):(.+) {
        rewrite (.+):(.+) $1_$2 last;
		}
		# 保證html片段請求
		location ~ \/docs\/(api|tutorial|guide|error|misc)[\/]? {
			rewrite (.+) /docs/ last;
		}
		#保證在已經導航過的頁面
		location ~ \/docs\/(api|tutorial|guide|error|misc)\/(.*) {
			rewrite (.+) /docs/ last;
		}
		#網站圖標
		location = /favicon.ico {
			rewrite (.+) /docs/favicon.ico last;
		}
		#目錄設置
        location / {
            root   html;
            index  index.html index.htm;
        }
        // 略掉其它內容
}

    二、ng.directive

        1、form：Directive that instantiates FormController. ngSubmit directive on the form element. ngClick directive on the first button or input field of type submit(input[type=submit]).

            css classes：ng-valid、ng-invalid、ng-pristine、ng-dirty.

        2、ngBindHtml：including ngSanitize in your module dependencies. Related：$sce.trustAsHtml(Strict Contextual Escaping).       

angular.module('ngBindHtmlExample', ['ngSanitize'])
 
.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
  $scope.myHTML =
     'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';
}]);

<div ng-controller="ngBindHtmlCtrl">
     <p ng-bind-html="myHTML"></p>
</div>

        3、ngController：The ngController directive attaches a controller class to view. This is a key aspect of how angular supports the principles behind the Model-View-Controller desing pattern.       

MVC components in angular:
Model — The Model is scope properties; scopes are attached to the DOM where scope properties are accessed through bindings.
View — The template (HTML with data bindings) that is rendered into the View.
Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values

        4、ngCsp：Content Security Policy.
        5、ngForm：Nestable alias form directive.

        6、ngHref：<a ng-href="http://127.0.0.1/{{hash}}"></a>

        7、ngInclude：Fetches, compiles and includes an external HTML fragment. Related： $sce.getTrustedResourceUrl .

            parameter：src、onload、autoscroll. 

            events：$includeContentLoaded(), type:emit, target:the current ngInclude scope;$includeContentRequested,type:emit,target:the scope ngInclude was declared in.
        8、ngModel：bind input、select、textarea to a property on the scope using NgModelController.                   

            ngModel is responsible for:

                Binding the view into the model, which other directives such as input, textarea or select require.
                Providing validation behavior (i.e. required, number, email, url).
                Keeping the state of the control (valid/invalid, dirty/pristine, validation errors).
                Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine).
                Registering the control with its parent form.

        9、ngRepeat：$index:number, $first:boolean, $middle:boolean, $last:boolean, $even:boolean, $odd:boolean.

            repeat-expression: (1)、x in xs. (2)、(key, value) in {"key1": value1, "key2":value2}. (3)、item in items track by $id(item).