AngularJSAngularJS

  1. data-ng-app指令是全部AngularJS应用程序的根元素,定义了一个Module;

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

<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. 相似的文件结构如下图:

  AngularJS 1

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

AngularJS 2

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

AngularJS 3

  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’,
AngularJS,    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.