angularJS 基础回顾


文章作者:松阳

本文出自 阿修罗道,禁止用于商业用途,转载请注明出处。  

原文链接:http://blog.csdn.net/fansongy/article/details/44106207







数据

“I‘m string”
123
{A:"I‘m",B:"Dictory"}
{"I","am","array"}

基本数据使用 ng-init,ng-bind 关联。

	<div ng-init="firstName=‘Json‘">
	    <p><span ng-bind="firstName"></span></p>
	</div>

表达式

可以写在文本区域的内容,表达方式为:{{expression}}它其实定价于ng-bind

 <p>My express:{{"check Now~"+firstName}}</p>

指令

  • ng-app 指令定义了 AngularJS 应用程序的根元素。
  • ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
	<div ng-app="" ng-init="names=[
	{name:‘Jani‘,country:‘Norway‘},
	{name:‘Hege‘,country:‘Sweden‘},
	{name:‘Kai‘,country:‘Denmark‘}]">
	
	<p>循环对象:</p>
	<ul>
	  <li ng-repeat="x in names">
	    {{ x.name + ‘, ‘ + x.country }}
	  </li>
	</ul>
	</div>

控制器

注意 脚本加载要放在使用前 例如在head中:

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>  
    <script type="text/javascript">
    var myModel = angular.module("myModel",[]);
    myModel.controller("myController",function($scope) {
        $scope.persion = {
            firstName:"Dan",
            lastName:"Jao"
        };
    });
    </script>
</head>


使用控制器要先声明一个对应的module。如上面的代码,使用angular.module(‘appName‘,[‘dependcyModuleNmae‘])来实现,并调用controller方法添加对应的controller。使用时直接使用对应的$scope即可

	<div ng-app="myModel" ng-controller="myController">
	    FirstName:<input type="text" ng-model="persion.firstName"><br>
	    LastName:<input type="text" ng-model="persion.lastName"><br>
	    Whole: {{persion.firstName+" "+persion.lastName}}
	</div>


一个页面控制器只能加载一个ng-app,它相当于main()。

过滤器

使用管道符可开启过滤功能

  • currency 格式化数字为货币格式。
  •  filter 从数组项中选择一个子集。
  •  lowercase 格式化字符串为小写。
  •  orderBy 根据某个表达式排列数组。
  •  uppercase 格式化字符串为大写。

例如:

{{ (x.name |uppercase)+","+x.others }}
<p>总价 = {{ (quantity * price) | currency }}</p>
<li ng-repeat="x in names | orderBy:‘country‘">

事件

向上传播事件$emit(‘myEvent‘),同层传播时间$broadcast(‘myEvent‘) 收事件使用:

$scope.$on(‘myEvent‘),function() {
    $scope.count++;
}

$scope

$scope是angularjs的基础。它是树形结构,根节点为`$rootScope。可以使用angular.element($0).scope()`进行调试。

如果你觉得这篇文章对你有帮助,可以顺手点个,不但不会喜当爹,还能让更多人能看到它... 技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。