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>My first expression: {{5+5}}</p>   
<p>Total in dollar:  </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变量、方法不能够共同用

 

  1. Filters包含了几乎种方法:currency, lowercase, uppercase,
    orderBy和filter,使用时要坐pipe character
    (|)为发端(filter的值如果是$scope下之变量,则非欲加引号,但orderBy需要);

     <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>
    
  2.  {{ 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
    

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>
  1. data-ng-show 对承诺 data-ng-hide,这有限只跟 data-ng-disabled 都受 Bool
    类型(true/false)的值,而且可以使用判断表达式(比如 hour > 12);


    Button


    I am visiable!
    I am not visible!
    10″>Count > 10

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>
  1. data-ng-include指令可用于在html中援引html;

  2. 于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);

  3. 相似的文书结构使下图:

  

于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 代码;

  1. AngularJS 于 SPA (Single Page Application)方面的优势:

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