1. 使用模块化写法。
var app = angular.module('myApp', []);

app.controller('TextController', function($scope) {

     $scope.txt = {'title':'some txt'};

});

　　[] 表示此模块不依赖其它模块。

　　ng-model, ng-repeat, ng-change，ng-click(相当于onclick)，ng-dblclick(相当于ondblclick)
 
　　ng-repeat可以通过$index返回当前引用的元素序号；
　　还可以通过$first、$middle及$last，ng-repeat指令返回布尔值，告诉你当前元素是否是集合中的第一个元素、中间的某个元素，或者最后一个元素。
 
　　注意：避免angular顾虑掉重复索引的数据，加 track by $index。（解决使用ng-repeat时报错 “ Error:ngRepeat:dupes ”）
　　track by 应在 filter (如：orderBy) 之后使用。
<table ng-controller="getList">

    <tr ng-repeat="item in list">

        <td ng-repeat="k in item track by $index">

            {{k}}

        </td>

    </tr>

</table>
　　
<!--遍历对象, 可以取到键-->

<li ng-repeat="(key, value) in obj">{{key}} | {{value}}</li>

　　

　　ng-repeat 高级用法：http://www.cnblogs.com/cook/p/4582860.html
 

　　ng-options参考：https://docs.angularjs.org/api/ng/directive/select

　　ng-options分组：http://www.cnblogs.com/xing901022/p/5122702.html

2. 首页使用ng-bind代替{{}}，避免解析前用户看到花括号。
 
<p>{{data.member}}</p>

<p ng-bind="data.member"></p>

对于index.html中的数据绑定操作，建议使用ng-bind。

3. $wath() 监视表达式，监控数据模型的变化。
function($scope) {

     $scope.funding = {startingEstimate: 0};

     computeNeeded = function() {

          $scope.funding.needed = $scope.funding.startingEstimate * 10;

     }

     $scope.$watch('funding.startingEstimate', computeNeeded);

}
　　当$watch第一参数中的表达式值发生改变，则执行第二个参数中的函数，第三个参数为true则遍历第一个参数中表达式的属性，当任何一个属性发生变化时就调用函数。
 
 
4. ng-submit="requestFunding()", ng-submit自动阻止浏览器执行默认的POST操作，当表单提交时执行指定函数。
　　注意：此时form不能有action属性，不然也一样会提交。
 
　　使用表单编辑时，需要选中radio这种input时，使用ng-checked，true时选中。如：ng-checked="list.use_scope==key"
 
 
5. 非侵入式JavaScript
<div ng-click="doSomething();">
　　不在全局命名空间中进行操作，指定的表达式只能访问元素控制器作用域范围内的函数和数据。
 
6. 迭代型元素
$scope.insertTom = function() {

     $scope.students.splice(1, 0, {name:'Tom Thumb', id: '4'});

}
7. 隐藏和显示: ng-show, ng-hide
$scope.toggleMenu = function() {

     $scope.menuState.show = !$scope.menuState.show;

}
8. css类和样式：ng-class, ng-style
.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则应用此类。
 
　　在img和a标签上进行数据绑定时，使用{{ }}无法生效，使用ng-src 和 ng-href 才能拦截到数据绑定请求。
 
9. 使用模块(module)组织依赖关系
<html ng-app='ShoppingModule'>

<body ng-controller='ShoppingController'>

     <table><tr>

          <td>{{item.title}}</td>

     </tr></table>

</body>

 // 创建模型

var shoppingModule = angular.module('ShoppingModule', []);

// Factory服务工厂，创建itemFactory接口，访问服务端

ShoppingModule.factory('itemFactory', function() {

     var items = {};

     items.query = function() {

          // 真实数据从服务端拉取

          return [

               {title: '', description: ''}

          ];

     };

     return items;

});

// Service
ShoppingModule.service('itemService', function() {
　　this.title = 'def';
})

// Provider
ShoppingModule.provider('itemProvider', function() {
　　this.$get = function() {
　　　　return {title: 'ghi'};
　　}
});

// 使用， 注意依赖自定义的service不需要加引号
ShoppingModule.controller('shoppingController', function($scope, itemFactory, itemService, itemProvider) {
　　$scope.res = itemFactory.query();
　　$scope.res2 = itemService;
　　$scope.res3 = itemProvider;
});
　　服务自身可以互相依赖，在大多数应用中，创建供所有代码使用的单个模块，并把所有依赖的东西都放入这个模块中，就能工作得很好。
　　
　　如果引入了SnazzyUIWidgets和SuperDataSync模块，那么应用的模块声明会像这样:
　　var appMod = angular.module(’app’, [’SnazzyUIWidgets’, ’SuperDataSync']);
 
　　更多例子：http://ju.outofmemory.cn/entry/121904
　　　　　　　https://segmentfault.com/q/1010000002540348
 
10. 过滤器
 
{{ 表达式 | 过滤器名称 : 参数1 : 参数2 }}
{{ 12.9 | currency | number:0 }}    // $13
 
// 自己编写首字母大写过滤器：

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';

}
11. 用路由和$location切换视图
# 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];

}

　　angular-ui-router例子：

　　http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref

　　http://www.cnblogs.com/koleyang/p/4522543.html

12. 与服务器交互
// 查询代码, 模板中使用items，与服务端交互最好写在服务里

function ShoppingController($scope, $http) {

     $http.get('/products').success(function(data, status, headers, config) {

          $scope.items = data;

     });

}
13. 编写指令
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']);

　以Angular的方式切换bootstrap Tab的指令：https://www.grobmeier.de/bootstrap-tabs-with-angular-js-25112012.html

14. 表单校验
<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>
　　required属性和email、number类型由angular适配支持非html5浏览器；
$valid属性获取表单的校验状态，输入项都合法时，angular将属性设为true.
 
function AddUserController($scope) {

     $scope.message = '';

     $scope.addUser = function() {

          // 保存到数据库中

     }

}

From：《用angularjs开发下一代web应用》& Internet.

另外这里有一篇关于angular的文章：Angular.js 介绍及实践教程

架构感知：

Link: http://www.cnblogs.com/farwish/p/4996253.html

@黑眼诗人　<www.farwish.com>

[Ng]Angular应用点概览的更多相关文章

  1. Angular（01）-- 架构概览

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  2. angular源码分析：angular中的依赖注入式如何实现的

    一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...

  3. angular(常识)

    我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...

  4. angular替代Jquery，常用方法支持

    1.angular.bind(self,fn.args);   切换作用域执行 2.angular.copy(source,[destination]);   拷贝和深度拷贝 3.angular.eq ...

  5. 【原创】angularjs1.3.0源码解析之service

    Angular服务 在angular中,服务(service)是以提供特定的功能的形式而存在的. angular本身提供了很多内置服务,比如: $q: 提供了对promise的支持. $http: 提 ...

  6. js 账单打印并分页

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  7. js 做账单处理

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  8. AngularJS模块具体解释

    模块是提供一些特殊服务的功能块.比方本地化模块负责文字本地化,验证模块负责数据验证.一般来说,服务在模块内部,当我们须要某个服务的时候,是先把模块实例化.然后再调用模块的方法. 但Angular模块和 ...

  9. AngularJS系统学习之Module（模块）

    本文源自:http://blog.csdn.net/woxueliuyun/article/details/50962645 学习之后略有所得, 来此分享.建议看原文. 模块是提供一些特殊服务的功能块 ...

随机推荐

  1. Hibernate5.2之原生SQL查询

    Hibernate5.2之原生SQL查询 一. 介绍  在上一篇博客中笔者通过代码的形式给各位读者介绍了Hibernate中最重要的检索方式--HQL查询.在本博文中笔者将向各位读者介绍Hiberna ...

  2. Python招聘需求与技能体系

    目前国内的招聘Python,基本都是偏向web后台开发,偶有高大上的数据挖掘&机器学习. 这是之前(2012年)找工作整理的一些JD,在梳理几年来的笔记,顺带理一理 可以以此建立自己的技能体系 ...

  3. 预处理语句--#define、#error和#warning

    1.#define语句 我们经常会这样定义一些宏:       #define BLOCK 8192 但这样的宏却不能在字符串中展开,如:    printf("The BLOCK numb ...

  4. 创建eclipse针对NDK的联合编译环境。

    警告, 这篇文章是老的配置方式, 随着goolge工具的完善,有了更高级的配置方式,参考文章: 1.http://jingyan.baidu.com/article/3ea51489e7a9bd52e ...

  5. hibernate的延迟加载及其与session关闭的矛盾

    延迟加载就是并不是在读取的时候就把数据加载进来,而是等到使用时再加载. 那么Hibernate是怎么知道用户在什么时候使用数据了呢?又是如何加载数据呢? 其实很简单,它使用了代理机制.返回给用户的并不 ...

  6. Flex 加载tiff

    gis系统常常要加载tiff,因为好多土地证书,各种文件都是扫描件,如果你是用as来写的前台,怎么加载呢,顺便说下用插件AlternaTIFF也是可以得不过浏览器加载这么多插件是不太好的. 首先TIF ...

  7. MSsql 服务器之间远程及其链接查询

    先指定端口1433(SQL,协议里面设置) 然后启用 菜单-程序-外围服务应用配置-服务和连接时外围应用配置 试试远程连接 成功连接OK 下面示例链接服务器.上面远程是必须走的一步动作. --创建链接 ...

  8. 关于HTML(JSP)页面的缓存设置 －－ cache-control

    我在项目中遇到这么一个问题,当用户登录了系统后,进入并copy下系统某个页面的link,然后关闭浏览器,重新打开浏览器,把刚才复制好的link paste到浏览器的地址栏去,直接enter,发现浏览器 ...

  9. 深入解析js中基本数据类型与引用类型，函数参数传递的区别

    ECMAScript的数据有两种类型:基本类型值和引用类型值,基本类型指的是简单的数据段,引用类型指的是可能由多个值构成的对象. Undefined.Null.Boolean.Number和Strin ...

  10. Myeclipse解决dubbo标签不识别问题

    Myeclipse解决dubbo标签不识别问题,引入dubbo.xsd文件,即可: