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).