AngularJS

1. data-ng-app指令是整个AngularJS应用程序的根元素，定义了一个Module；

2. 在一个ng-app指令内定义的变量是全局的；比如在一个P元素内定义的cost和quantity变量，可以在另一个P元素内使用；

<div data-ng-app="">
<p data-ng-bind="name" data-ng-init="cost=3;quantity=4"></p>
<p><label data-ng-bind="name"/></p>
<p><span>My first expression: {{5+5}}</span></p>   
<p>Total in dollar:  <span data-ng-bind="cost * quantity"></span></p>
</div>

3. data-ng-init中可以定义多个变量的初始值，使用分号进行分隔（但通常不会使用data-ng-init命令，会使用data-ng-controller）；

<p ng-init="person={firstName:'Jacky',lastName:'Ge'};points=[2,3,5,8,10]"></p>

4. data-ng-controller命令用来定义整个application的controller对象，$scope对象是应用程序对象，包含了应用程序的所有变量和函数（如果将Controller方法放到一个JS文件中去，那么需要在HTML中引用这个js文件，文件名需要是{ControllerName}.js），一个controller对应了一个$scope，不同controller之间的$scope变量、方法不能共用；

5. Filters包含了几种方法：currency, lowercase, uppercase, orderBy和filter，使用时需要以pipe character (|)为开始（filter的值如果是$scope下的变量，则不需要加引号，但orderBy需要）；

<div data-ng-app="" data-ng-controller="filterController">
    <p>
        My name is: {{lastName | lowercase}}
    </p>
    <p>
        Quantity: <input type="number" data-ng-model="quantity" min="0"/>
        <br/>
        Price: <input type="number" data-ng-model="price" min="0"/><br/>
        Total: {{(quantity*price)|currency}}
    </p>
    <p>
        <ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ", " + x.country }}
        </ul>
    </p>
        <p>
            <input type="text" data-ng-model="test"/><br/>
            <ul>
              <li ng-repeat="x in names2 | filter:test | orderBy:'country'"><!--如果需要对某一个字段（比如name）进行filter，则格式为: |filter:{name:test}-->
                {{ (x.name | uppercase) + ', ' + x.country }}
              </li>
            </ul>
        </P
</div>
<script>
    function filterController($scope){
        $scope.lastName="aaBB";
        $scope.quantity=4;
        $scope.price=55;
        $scope.names=[{name:'Jacky',country:'China'},{name:'Murphy',country:'Malaysia'}];
        $scope.names2 = [
            {name:'Jani',country:'Norway'},
            {name:'Hege',country:'Sweden'},
            {name:'Kai',country:'Denmark'}
        ];
    }
</script>

6. $http.get()作用类似于jQuery中的$.get()，只需要在Controller事件中加上$http作为参数即可，如下例（链接返回的一个JSON文件）：

<div data-ng-app="" data-ng-controller="customersController">
    <ul>
        <li data-ng-repeat="x in names">
            {{x.Name+", "+x.Country}}            
        </li>
    </ul>
</div>

<script>
    function customersController($scope,$http){
    　　$http.get("http://www.w3schools.com/website/Customers_JSON.php").success(function(response){$scope.names=response;});
    }
</script>

7. data-ng-show 对应 data-ng-hide，这两个与 data-ng-disabled 都接受 Bool 类型（true/false）的值，而且可以使用判断表达式(比如 hour > 12)；

<div data-ng-app="">
    <p>
        <button data-ng-disabled="mySwitch">Click Me!</button><br/>
        <input type="checkbox" data-ng-model="mySwitch"/>Button
    </p>
    <p>
        <input type="number" min="0" data-ng-model="count"/><br/>
        <span data-ng-show="mySwitch">I am visiable!</span><br/>
        <span data-ng-hide="mySwitch">I am not visible!</span><br/>
        <span data-ng-show="count>10">Count > 10</span>
    </p>
</div>

8. 使用Modules可以避免或减少全局变量/事件，这样就可以避免变量、controller、事件被重写，而且最好在HTML加载完后，在AngularJS相关代码执行前，加载AngularJS文件（建议每个应用程序至少有一个module文件，一个controller文件）；

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<script>
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

9. data-ng-include指令可用于在html中引用html；

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

10. 在Module中创建Controller的三种方法：

//匿名方法直接创建
var demoApp=angular.module('demoApp',[]);
demoApp.controller('simpleController, function($scope){
       $scope.customers=[{name:'Dave Jones', city:'Phoenix'},{name:'Jamie Riley', city:'Atlanta'},{name:'Heedy Wahlin',city:'Chandler'}];
});

//创建一个controller函数，命名并赋值给Module
var demoApp=angular.module('demoApp',[]);
function simpleController($scope){
      $scope.customers=[{name:'Dave Jones', city:'Phoenix'},{name:'Jamie Riley', city:'Atlanta'},{name:'Heedy Wahlin',city:'Chandler'}];
}
demoApp.controller('simpleController',simpleController);

//可以绑定多个controller函数
var demoApp=angular.module('demoApp',[]);
var controllers={};
controllers.simpleController=function($scope){
        $scope.customers=[{name:'Dave Jones', city:'Phoenix'},{name:'Jamie Riley', city:'Atlanta'},{name:'Heedy Wahlin',city:'Chandler'}];
};
//还可以继续添加controller函数:controllers.function2= ....
demoApp.controller(controllers);

11. 一般的文件结构如下图：

　　

在SharePoint上构建SPA时，可以使用以下结构：

1) bootstrap 和 scripts文件夹中放置的是供整个站点使用的文件；

2) home.html 代表了我们的aspx页面；

3) homeSPA 文件夹包含了home.html 页面需要的内容：

3.1) views 文件夹中包含了 home.html 中需要的view;

3.2) css 文件夹中包含了 home.html 需要的样式和每个 view 需要的样式；

3.3) js 文件夹中包含了home.html 中需要的 angularJS 代码；

12. AngularJS 在 SPA （Single Page Application）方面的优势：

13. ng-view 和 ng-include 的区别：

ngView works together with routing, and is mostly essential to an angular SPA. It's normally used to include the main content of your site, the bit in between the header and footer that changes every time a user clicks a link. Its integration with routing means changing the ngView content changes the controller too (depending on your configuration).

ngInclude is a general purpose include, you may not even need it. You'd sometimes use it inside a view to avoid repeating yourself, in the cases where several views need the same code included.

 所以，可以在ng-view中嵌套使用ng-include.

14. 在将javascript代码分散到不同的文件中时，需要按照依赖关系的顺序来引用；例如以下代码所示，先声明module对象，然后声明service，最后声明controller，因为在controller中需要用到service对象；

<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/services/customersService.js"></script>
<script type="text/javascript" src="app/controllers/controllers.js"></script>

另外，在service文件和controller文件中使用module对象时，需要用以下方式：

angular.module('customersApp').service('customersService', function () {});

angular.module('customersApp').controller('CustomersController', function ($scope, customersService) {});

15. 在使用app.config时，需要设置$routeProvider.when()下面的templateUrl属性，即使将app.config 代码放在单独的js文件中，如果设置相对路径时，需要基于页面文件，如果设置为绝对路径，则直接使用"./"来表示根目录；但在SharePoint上使用时，需使用相对路径，可使用 .. 来返回到当前页面的上级目录；

16. $routeProvider中可以传递参数，参数会自动保存在$routeParams中，如下所示：

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}

示例：route定义：

app.config(function ($routeProvider) {
　　$routeProvider.when('/customers',
　　{
　　　　controller: 'CustomersController',
　　　　templateUrl: 'app/partials/customers.html'
　　})
　　//Define a route that has a route parameter in it (:customerID)
　　.when('/customerorders/:customerID',
　　{
　　　　controller: 'CustomerOrdersController',
　　　　templateUrl: 'app/partials/customerOrders.html'
　　})
　　//Define a route that has a route parameter in it (:customerID)
　　.when('/orders',
　　{
　　　　controller: 'OrdersController',
　　　　templateUrl: 'app/partials/orders.html'
　　})
　　.otherwise({ redirectTo: '/customers' });
});

controller定义：

angular.module('customersApp').controller('CustomerOrdersController', function ($scope, $routeParams, customersService) {
　　$scope.customer = {};
　　$scope.ordersTotal = 0.00;

　　//I like to have an init() for controllers that need to perform some initialization. Keeps things in
　　//one place...not required though especially in the simple example below
　　init();

　　function init() {
　　　　//Grab customerID off of the route
　　　　var customerID = ($routeParams.customerID) ? parseInt($routeParams.customerID) : 0;
　　　　if (customerID > 0) {
　　　　　　$scope.customer = customersService.getCustomer(customerID);
　　　　}
　　}

});

17.