AngularJs笔记(看菜鸟教程整理的)

AngularJs学习笔记


基本定义:
1.ng-app = "" 定义了angularJs的使用范围;
2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值,有多个变量时,中间用分号隔开;
3.ng-model = "变量" 定义变量名;
4.ng-bind = "变量" 绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。
但是一般都用双重花括号来获取变量的值,比如:{{变量}};
5.ng-repeat 指令会重复一个 HTML 元素:(可以用于循环遍历数组)



eg:5

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <p>使用 ng-repeat 来循环数组</p>
 <ul>
<li ng-repeat="x in names">
 {{ x }}
</li>
 </ul>
</div>

AngularJs指令:是以ng作为前缀的HTML属性。
AngularJs表达式写在双大括号内{{expression}}。
AngularJs表达式把数据绑定到HTML,这与ng-bind 指令作用相同。
AngularJs将在表达式书写的位置"输出"数据。


AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。


注意:


ng-model是用于表单元素的,支持双向绑定。对普通元素无效; <input> 元素 <select> 元素(下拉列表)<textarea> 元素 <button> 元素  HTML5 增加了如下表单元素:<datalist><keygen><output>
ng-bind用于普通元素,不能用于表单元素,应用程序单向地渲染数据到元素;
当ng-bind和{{}}同时使用时,ng-bind绑定的值覆盖该元素的内容。


ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:
ng-invalid:未通过验证的表单
ng-valid:布尔型属性,它指示表单是否通过验证。如果表单当前通过验证,他将为true
ng-dirty:布尔值属性,表示用户是否修改了表单。如果为 ture,表示有修改过;false 表示修没有修改过
ng-touched:布尔值属性,表示用户是否和控件进行过交互
ng-pristine:布尔值属性,表示用户是否修改了表单。如果为ture,表示没有修改过;false表示修改过




$rootscope设置的变量在所有controller里面都是可以直接用{{$root.变量名}}来显示的,当然也可以赋值给$scope.


$rootscope是根作用域,是整个应用程序(ng-app),$scope只作用于本个方法




js中split(),如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
String.split() 执行的操作与 Array.join 执行的操作是相反的。


"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]




AngularJS过滤器
currency 格式化数字为货币格式。 
{{ 250 | currency }}            // 结果:$250.00
{{ 250 | currency:"RMB ¥ " }}  // 结果:RMB ¥ 250.00
filter 从数组项中选择一个子集。
// 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} 
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。


 // 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}


// 根据id升序排  默认升序false
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}


uppercase 格式化字符串为大写。
date格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
number 格式化(保留小数)
{{149016.1945000 | number:2}}
limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位




Array.prototype.slice.call(arguments);




<div ng-app = "myApp" ng-controller = "myCtrl">
<span>{{myUrl}}<span>
</div>


<script>
angular.module("myApp",[]).controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>


 $location 服务,它可以返回当前页面的 URL 地址。
 
 $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据
 
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});


AngularJS $timeout 服务对应了 JS window.setTimeout 函数。(Timer)


AngularJS $interval 服务对应了 JS window.setInterval 函数。(一直执行)


创建自定义服务
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});


$watch:持续监听数据上的变化,更新界面,如:


<div ng-app="myApp" ng-controller="myCtrl">
   <b>请输入姓名:</b><br>
   <b>姓:</b><input type="text" ng-model="lastName"><br>
   <b>名:</b><input type="text" ng-model="firstName"><br>
   <h1>{{ lastName + " " + firstName }}</h1>
   <h2>{{ fullName }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.lastName = "";
   $scope.firstName = "";


   //监听lastName的变化,更新fullName
   $scope.$watch('lastName', function() {
      $scope.fullName = $scope.lastName + " " + $scope.firstName;
   });


   //监听firstName的变化,更新fullName
   $scope.$watch('firstName', function() {
      $scope.fullName = $scope.lastName + " " + $scope.firstName;
   });
});
</script>


如果通过$watch去监听某变量的变化,最后去更新一个fullName就太麻烦了,还倒不如使用函数的方式,如getFullName():
$scope.getFullName =function(){  return $scope.lastName + " " + $scope.firstName;}




$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);




使用 ng-options 创建选择框(使用了数组作为数据源)
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例:
<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
这种是通过ng-repeat方式创建的下拉框
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>




比较:
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:
使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。


使用了对象作为数据源:x 为键(key), y 为值(value):
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>


<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>


表格
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>


style{table tr:nth-child(odd){};} 表格中的奇数行
style{table tr:nth-child(even);} 表格中的偶数行


 $index:    <td>{{ $index + 1 }}</td>//表格显示序号
 
 <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
 
 <tr ng-repeat="x in names" style="{{$even?'background-color: #f1f1f1':'background-color: #ff0000'}}">
 允许跨域请求
 header("Access-Control-Allow-Origin: *");
 
 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
 
 ng-show 指令隐藏或显示一个 HTML 元素。ng-hide 指令用于隐藏或显示 HTML 元素。
 <p ng-show="true">我是可见的。</p> 


<p ng-show="false">我是不可见的。</p>


<div ng-app="" ng-init="hour=13">
 
<p ng-show="hour > 12">我是可见的。</p>   可以是布尔值的表达式
 
</div>




AngularJS事件


1.ng-click点击事件  所有的操作都是通过Controller来完成的
<div ng-app="myApp" ng-controller="myCtrl">


<button ng-click="count = count + 1">点我!</button>


<p>{{ count }}</p>  //类似ng-model是双向绑定的,类似监听者模式(响应式)


</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>




AngularJS表单


HTML控件:input元素,select元素,button元素,textarea元素


input控件使用ng-model指令来实现数据绑定
<input type = "text" ng-model = "firstName">


通过以上代码应用有了一个firstName的属性。它通过ng-model指令来绑定到你的应用
firstName的属性可以在controller中使用:
var app = angular.module('myApp',[]);
app.controller($scope,function(){
$scope.firstName = "Tom";
});


也可以直接通过表达式来使用这个属性
<div ng-app="">
  <form>
    First Name: <input type="text" ng-model="firstname">
  </form>
  <h1>你输入的内容为: {{firstname}}</h1>
</div>


Checkbox(复选框),默认是false,未被选中
<form>
    Check to show a header:
    <input type="checkbox" ng-model="myVar">
</form>
 
<h1 ng-show="myVar">My Header</h1>




Radio(单选框)  myVar 的值可以是 dogs, tuts, 或 cars。


<body ng-app="">


<form>
  选择一个选项:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>


<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>


<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>


</body>


select(下拉框)


<body ng-app="">


<form>
  选择一个选项:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>


<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>


<p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p>


</body>




app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});






输入验证  HTML 表单属性 novalidate 用于禁用浏览器默认的验证。
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录


<body>


<h2>验证实例</h2>


<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>


<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>


<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>


<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>


</form>


<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>


</body>
 
 
AngularJS API
 
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。




使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:


sites.htm 文件代码:
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>


<div ng-app="myApp" ng-controller="sitesCtrl"> 
  <div ng-include="'sites.htm'"></div>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
    $http.get("sites.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>






AngularJS 动画


<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate:
<body ng-app="ngAnimate">


<style>
.hh {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}


.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}


</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">


<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>


<div class = "hh" ng-hide="myCheck"></div>


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


</body>




AngularJS 依赖注入
一句话 --- 没事你不要来找我,有事我会去找你。


1.一个对别人有依赖的东西,它想要单独测试,就需要在依赖项齐备的情况下进行。如果我们在运行时注入,就可以减少这种依赖
2.参数由定义方决定
3.与import还不完全一样


AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:
value
factory
service
provider
constant




1.Value 是一个简单的 javascript 对象,用于向控制器传递值(配置阶段):
// 定义一个模块
var mainApp = angular.module("mainApp", []);


// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...


// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   
});




2.factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
// 定义一个模块
var mainApp = angular.module("mainApp", []);


// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 


// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...




3.provider
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get(),它用于返回 value/service/factory。
// 定义一个模块
var mainApp = angular.module("mainApp", []);
...


// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});


4.constant
constant(常量)用来在配置阶段传递数值,注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");






练习:自定义directive(指令)
元素
<first/>
<second/>


angular.module('MyApp',[])
.directive('first',first)
.controller('Con',['$scope',func1]);


function first(){
  var directive = {
    restrict:'ACE',
    template:'this is the it-first directive',
  };
  return directive;
};


fucntion func1($scope){
  $scope.name = 'alice';
}


等价于 :
 angular.module('myApp',[]).directive('first',[function(){
  return {
    restrict:'AE',
    template:'second directive',
    link:function(){
      console.log("this is a link");
    },
    controller:function($scope,$element,$attrs){
      console.log("this is a con");
    }
  };
 }]).controller('Con1',['$scope',function($scope){
  $scope.name = "alicehhh";
 }]);




 
展开阅读全文

没有更多推荐了,返回首页