js引入到head标签中,ng-app="模块名"写到body标签内。
<title>angular.min.js引用</title> <script type="text/javascript" src="angular.min.js"></script>#模块定义并赋值给myapp,myApp模块名,[]内填其他模块
var myApp = angular.module('myApp',[]);
#定义控制器的两种形式,并在控制器的函数中引入$scope
myApp.controller('myAppController',function($scope){
$scope.x = 0;
})
或者
angular.module('myApp').controller('myAppController',function($scope){
$scope.x = 0;
})
#这是一个加法函数定义
$scope.add = function(){
return x+y;
}
<input type="button" ng-click="add()" value="求和">
#index.html中
<script type="text/javascript" src="angular-route.min.js"></script>
<body>
<ul>
<li><a href="#showname">姓名列表显示</a></li>
<li><a href="#showinfo">信息列表显示</a></li>
</ul>
<div style="width:300px; height:300px;border:1px solid black;" ng-view>
</div>
</body>
#app.route.js中
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/showname',{
templateUrl:'showname.html',
controller:'showNmeController'
})
.when('/showinfo',{
templateUrl:'showinfo.html'
controller:'showInfoController'
})
.otherwise({
redirectTo:'/showname'
});
}]);
解决controller之间的通信问题,$rootScope可以创建全局变量供所有控制器及对应的html使用。
#controller.js中
app.controller('appController',['$scope','$rootScope',function($scope,$rootScope){
$scope.x = 1;
$rootScope.y = x;
}]);
#res/test.json
{"id":"1","name":"lh"}
#GET方法
$http({
method: 'GET',
url: 'res/test.json'
}).success(function(respond){
console.log(respond.id);
}).error(function(err){
console.log(err);
});
html中应当用ng-src、ng-href指令代替src、href属性。
自带的4种过滤器:
货币过滤器
#货币过滤器(参数写啥,x前面就是啥)
{{x | currency:'货币符号'}}
{{x | currency}}或{{x | currency:'$'}}
filter过滤器
#filter过滤器
*** | filter:子集数组
<input type="text" ng-model='filter_input'>
<ul>
<li ng-repeat='pname in pnames | filter:filter_input'>{{pname}}</li>
</ul>
#controller中
$scope.filter_input = '';
$scope.pnames = ['lily','lisa','libai','lilei','lixiaolong','lihua'];
uppercase, lowercase过滤器
{{*** | uppercase}}
orderBy过滤器
//用于根据表达式的值对显示的内容进行排序
//一般用于ng-repeat结构中,且ng-repeat不是简单数据结构
<ul>
<li ng-repeat='info in infos | orderBy:"score"'>{{info.stuName+','+info.score}}</li>
</ul>
$scope.infos = [{stuName:'frank',score:86},
{stuName:'lily',score:100},
{stuName:'lucy',score:42},
{stuName:'lilei',score:43}
];