var app = angular.module(‘myApp‘, []); app.controller(‘TextController‘, function($scope) { $scope.txt = {‘title‘:‘some txt‘}; });
function($scope) { $scope.funding = {startingEstimate: 0}; computeNeeded = function() { $scope.funding.needed = $scope.funding.startingEstimate * 10; } $scope.$watch(‘funding.startingEstimate’, computeNeeded); }
<div ng-click="doSomething();">
$scope.insertTom = function() { $scope.students.splice(1, 0, {name:‘Tom Thumb‘, id: ‘4‘}); }
$scope.toggleMenu = function() { $scope.menuState.show = !$scope.menuState.show; }
.error {background-color: red;}
<div ng-controller=‘headerController‘>
<div ng-class=‘{error: isError, warning: isWarning}‘>{{messageText}}</div>
<button ng-click=‘showError();‘>错误提示</button>
<tr ng-repeat=‘restaurant in directory‘ ng-click=‘selectRestaurant($index)‘ ng-class=‘{selected: $index==selectedRow}‘>
<td>{{restaurant.name}}</td>
</tr>
</div>
function HeaderController($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = ‘这是错误信息‘;
$scope.isError = true;
$scope.isWarning = false;
}
}
function RestaurantTableController($scope) {
$scope.directory = [{
name: ‘The handsome heifer‘, cuisine: ‘BBQ‘,
name: ‘Greens green greens‘, cuisine: ‘salads‘
}];
$scope.selectRestaurant = function(row) {
$scope.selectedRow = row;
}
}
# 使用ng-class，json键为css类名，值为true则应用此类。
<html ng-app=‘ShoppingModule‘> <body ng-controller=‘ShoppingController‘> <table><tr> <td>{{item.title}}</td> </tr></table> </body> function ShoppingController($scope, Items) { $scope.items = Items.query(); // Items对象定义成一个服务 } // 创建模型 var shoppingModule = angular.module(‘ShoppingModule‘, []); // 服务工厂，创建Items接口，访问服务端 ShoppingModule.factory(‘Items‘, function() { var items = {}; items.query = function() { // 真实数据从服务端拉取 return [ {title: ‘‘, description: ‘‘} ]; }; return items; });
// 自己编写首字母大写过滤器： var homeModule = angular.module(‘HomeModule‘, []); homeModule.filter(‘titleCase‘ function() { var titleCaseFilter = function(input) { var words = input.split(‘ ‘); for (var i = 0; i < words.length; i++) { words[i] = words[i].charAt(0).toUpperCase() + Words[i].slice(1); } return words.join(‘ ‘); }; return titleCaseFilter; }); <body ng-app=‘HomeModule‘, ng-controller=‘HomeController‘> <h1>{{ pageHeading | titleCase }}</h1> </body> function HomeController($scope) { $scope.pageHeading = ‘page title‘; }
# index.html <html ng-app=‘AMail‘> <body> <h1>A-Mail</h1> <div ng-view></div> </body> </html>
# list.html <table><tr ng-repeat=‘message in messages‘> <td>{{ message.sender }}</td> <td><a href=‘#/view/{{ message.id }}‘>{{ message.subject }}</td> <td>{{ message.date }}</td> </tr></table>
# detail.html <div> <strong>To:</strong> <span ng-repeat=‘recipient in message.recipients‘>{{ recipient }}</span> </div> <a href=‘#/‘>返回列表</a>
# controller.js
// 为AMail服务创建模块 var aMailServices = angular.module(‘AMail‘, []);
// 在url、模板和控制器之间建立映射关系 function emailRouteConfig($routeProvider) { $routeProvider. when(‘/‘, {controller: ListController, templateUrl: ‘list.html‘}). // 在id前面加一个冒号，指定一个参数化的url when(‘/view/:id‘, {controller: DetailController, templateUrl: ‘detail.html‘}). otherwise({redirectTo: ‘/‘}); }
// 配置路由 a.MailServices.config(emailRouteConfig);
// 虚拟数据 messages = [{}];
// 给邮件列表数据的控制器 function ListController($scope) { $scope.messages = messages; }
// 从路由信息(url中解析的)中获取邮件id，然后用它找到正确的邮件对象 function DetailController($scope) { $scope.message = messages[$routeParams.id]; }
// 查询代码, 模板中使用items，与服务端交互最好写在服务里 function ShoppingController($scope, $http) { $http.get(‘/products‘).success(function(data, status, headers, config) { $scope.items = data; }); }
var appModule = angular.module(‘app‘, []); appModule.directive(‘ngbkFocus‘, function() { return { link: function(scope, element, attrs, controller) { element[0].focus(); } }; }); // 使用 <button ngbk-focus>被聚焦的按钮</button> var appModule = angular.module(‘app‘, [‘directives‘]);
<form name=‘addUserForm‘ ng-controller=‘AddUserController‘> <input ng-module=‘user.first‘ required> <input type=‘email‘ ng-module=‘user.email‘ required> <input type=‘number‘ ng-module=‘user.email‘ required> <button ng-disabled=‘!addUserForm.$valid‘>提交</button> </form>
function AddUserController($scope) { $scope.message = ‘‘; $scope.addUser = function() { // 保存到数据库中 } }
Link: http://www.cnblogs.com/farwish/p/4996253.html
@黑眼诗人 <www.farwish.com>
原文：http://www.cnblogs.com/farwish/p/4996253.html