（一）Hello Angular

index.html

<!DOCTYPE html>

<html ng-app>

  <head>

    <title>Test AngularJS</title>

    <meta charset="utf-8">

  </head>

  <body>

    <div ng-controller="HelloAngular">

      <p>{{greeting.text}},Angular</p>

    </div>

  </body>

  <script src="js/angular.min.js"></script>

  <script src="controller/HelloAngular.js"></script>

</html>

HelloAngular.js

function HelloAngular($scope) {

  $scope.greeting = {

    text: 'Hello'

  };

}

angular.min.js

这个文件在网上随便那里下个吧，比如新浪的前端库地址：http://lib.sinaapp.com/js/angular.js/angular-1.1.0/angular.min.js

min是压缩后的文件，在indexl中直接引入链接也可，但还是下载到本地方便呢

在浏览器打开index.hml，看看输出吧～

PS:上面的index.html中的使用ng-controller的方式存在一点点问题，就是快速刷新网页或者是很多数据的时候会有短暂的显示{{greeting.text}}，我们可以通过如下的方式解决。

<p>{{greeting.text}},Angular</p>

把index.html中的上面那句换成

<p><span ng-bind="greeting.text"></span>,Angular</p>

在网页没加载好的情况下会显示“,Angular”，而不是“{{greeting.text}},Angular”

（二）错误的控制器使用方法

不要使用通用控制器，进行继承或调用等，每个控制器只负责一小部分的逻辑即可

如下的控制器和首页引用代码是不建议使用的样例：

HTML

<div ng-controller="CommonController">

  <div ng-controller="Controller1">

    <p>{{greeting.text}}, Angular</p>

    <button ng-click="test1()">Click1</button>

  </div>

  <div ng-controller="Controller2">

    <p>{{greeting.text}}, Angular</p>

    <button ng-click="test2()">Click2</button>

  </div>

  <button ng-click="common()">Common</button>

</div>

Controller

function CommonController($scope) {

  $scope.common = function() {

    alert("Common");

  };

}

function Controller1($scope) {

  $scope.greeing = {

    text: 'Hello1'

  };

  $scope.test1 = function() {

    alert("Test1");

  };

}

function Controller2($scope) {

  $scope.greeing = {

    text: 'Hello2'

  };

  $scope.test2 = function() {

    alert("Test2");

  };

}

虽然可以正常的工作，但是建议把公共的代码抽象成“服务”来实现。

（三）ng-model 的时时显示

<!DOCTYPE html>

<html ng-app>

  <head>

    <title>Test AngularJS</title>

    <meta charset="utf-8">

  </head>

  <body>

    <div>

      <input ng-model="qq" />

      <p>{{ qq }}</p>

    </div>

  </body>

  <script src="js/angular.min.js"></script>

</html>

上面就是效果，输入什么下面就同步的显示什么

（四）ng-repeat

下面的代码片段是一个简单的循环

<div>

<ol>

  <li ng-repeat="name in names">

    {{name}} from {{department}}

  </li>

</ol>

</div>

可以定义全局的rootScope，这是全局可用的

function CreetCtrl($scope, $rootScope) {

  $rootScope.department = 'Angular';

}

function ListCtrl ($scope) {

  $scope.names = ['David', 'Dong', 'Sellea'];

}

（五）路由，模块，依赖注入

(一)中的控制器定义的是全局变量，这样做是不好的，而且也不模块化

var helloModule = angular.module('HelloAngular', []);

helloModule.controller('helloNgCtrl', ['$scope', function($scope){

  $scope.greeting = {

    text: 'Hello'

  };

}]);

路由自带的也可以，不过使用angular-ui-router这个模块会更好

依赖注入的功能使得AngularJS可以方便的引入模块，在引入最小数量模块的同时实现功能

Hello World会写后，接下来学习些双向数据绑定什么的，这些概念都是第一次听说，AngularJS真是个蛮有趣的东西

AngularJS学习笔记（一）——一些基本知识的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. IP地址和子网划分学习笔记之《预备知识：进制计数》

    一.序:IP地址和子网划分学习笔记开篇 只要记住你的名字,不管你在世界的哪个地方,我一定会去见你.——新海诚 电影<你的名字> 在我们的日常生活中,每个人的名字对应一个唯一的身(敏)份(感 ...

  10. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

随机推荐

  1. hdu 3081 hdu 3277 hdu 3416 Marriage Match II III IV //灵活运用最大流量

    3081 意甲冠军: n女生选择不吵架,他甚至男孩边(他的朋友也算.并为您收集过程).2二分图,一些副作用,有几个追求完美搭配(每场比赛没有重复的每一个点的比赛) 后.每次增广一单位,(一次完美匹配) ...

  2. JS它DOM

    DOM:document object model.文档对象模型.它主要由许多节点.而基于JS对象的一切视角,DOM核心是节点对象和操作方法的属性.从下面三方面来介绍DOM. 一.节点查找与操作 这部 ...

  3. SQL开发中容易忽视的一些小地方(一)

    原文:SQL开发中容易忽视的一些小地方(一) 写此系列文章缘由: 做开发三年来(B/S),发现基于web 架构的项目技术主要分两大方面: 第一:C#,它是程序的基础,也可是其它开发语言,没有开发语言也 ...

  4. hdu 5076 最小割灵活运用

    这意味着更复杂的问题,关键的事实被抽象出来:每个点,能够赋予既有的值(挑两个一.需要选择,设定ai,bi). 寻找所有和最大.有条件:如果两个点同时满足: 1,:二进制只是有一个不同之处.  2:中的 ...

  5. Codeforces Round #254 (Div. 2)：A. DZY Loves Chessboard

    A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...

  6. Oracle性能优化学习笔记WHERE在连接顺序的条款

     ORACLE自下而上分析顺序WHERE条款,根据这一原理,表之间的连接必须写在其它WHERE先决条件, 这些条件可以过滤掉要被写入记录的最大数目WHERE在条款结束. 比如:        (低效, ...

  7. Dubbo与Zookeeper、SpringMVC整合和利用（负载均衡、容错）

    互联网发展,扩大了网站应用程序的大小.传统的垂直应用架构已经无法应付.分布式服务架构和流量计算架构势在必行,Dubbo是一个分布式服务框架.在这样的情况下诞生的.如今核心业务抽取出来.作为独立的服务, ...

  8. android_线

    说明:android螺纹. android无非就是一个线程Main Thread和Worker Thread.(除了主线程Main Thread是Worker Thread) Main Thread ...

  9. ABP领域层——仓储（Repositories）

    ABP领域层——仓储(Repositories) 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之11.ABP领域层——仓储(Repositories) ABP是 ...

  10. GeeksforGeeks - Adjacency List邻接矩阵C\C++代码

    邻接矩阵的图示: 构建一个这种无向邻接矩阵. 參考站点: http://www.geeksforgeeks.org/graph-and-its-representations/ 这里写了个类,添加删除 ...