1.
     ng-app,定义一个angular-js应用程序
     ng-model,把元素值绑定到app
     ng-bind, 把应用程序值绑定到html
     ng-init, 初始化Angularjs应用程序变量;     <div ng-app=""  ng-init="firstName='John'"> //未通过;
     #####################################
     1.数据模型(modal)主要提供数据。它不会和视图(view)直接操作
     2.controller保存modal提供的数据,与视图进行操作。
     3.view是视图,也就是页面展示。
     
     #####################################controller
     1.不要视图复用controller,一个控制器一般只负责一小块视图(一一对应);
     2.不要在controller中直接操作DOM,这不是控制器的职责,操作DOM要使用指令derective(见上节教程);
     3.不要在controller中进行数据过滤的操作,有专门的filter服务来实现这一块;
     4.一般来说,不同的controller之间是不互相调用的,控制器的交互一般通过事件进行。
 
 
function controller($scope){
  $scope.greeting = {
    text : 'hello'
  };
}
     
     #####################################
     <div ng-app="myapp2" id="myapp2" ng-init="person={firstName:'John',lastName:'Doe233'}">
 
<p>姓为 {{ person.lastName }}</p>
 
</div> 
 
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.firstName= "John";
   $scope.lastName= "Do322323e";
});
 
var app2 = angular.module('myapp2', []);
angular.bootstrap(document.getElementById("myapp2"), ['myapp2']);
 
</script> 
 
多个app的绑定,只有第一个可以自动绑定;
     #####################################
     
     
     #####################################
     表达式{{ expression }}  //同ng-bind,可以包含文字,预算符,变量
     
     ng-app指令定义了应用, ng-controller 定义了控制器。
 
     控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。  //这玩意儿的意义是什么呢?
      <div ng-app="myApp" ng-controller="myCtrl">
 
名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script> 
 
--链接到外部文件;
 只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可 
 
     >ng-repeat //<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <li ng-repeat="x in names">
 
     
     
2.过滤器,filters
     currency, filter,lowercase,oerderby :expressions,uppercase
 
3.AngularJS XMLHttpRequest
4.显示表格
     显示序号 ($index)
     使用 $even 和 $odd
5.AngularJS SQL
     允许跨域,header("Access-Control-Allow-Origin: *");
6.HTML DOM
     ng-disabled = "true"  true/false可以使用表达式;
     ng-show="true" 
     ng-hide    
7.HTML事件
     ng-click="count = count + 1"
8.angular 模板
     模块定义了一个应用程序。
     模块是应用程序中不同部分的容器。
     模块是应用控制器的容器。
     控制器通常属于一个模块。
     //可放到外部js.
9.angular表单,表单验证;
     <!DOCTYPE html>
<html>
<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>master = {{master33}}</p>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master33 = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master33);
    };
    $scope.reset();
});
</script>
 
</body>
</html>
10.angularjs api
posted on 2016-03-23 22:01  叶青青青  阅读(117)  评论(0编辑  收藏  举报