AngularJS学习笔记（一）——一些基本知识
（一）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学习笔记（一）——一些基本知识的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- IP地址和子网划分学习笔记之《预备知识：进制计数》
一.序:IP地址和子网划分学习笔记开篇 只要记住你的名字,不管你在世界的哪个地方,我一定会去见你.——新海诚 电影<你的名字> 在我们的日常生活中,每个人的名字对应一个唯一的身(敏)份(感 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
随机推荐
- web前端利用HSTS(新的Web安全协议HTTP Strict Transport Security)漏洞的超级Cookie(HSTS Super Cookie)
web前端如果想实现cookie跨站点,跨浏览器,清除浏览器cookie该cookie也不会被删除这似乎有点难,下面的教程让你完全摆脱document.cookie 1.服务器端设置HSTS 如PHP ...
- jekyll博客安装
摘要: 一直用Mac,换了新公司使用的电脑是windows,网上粗略的看了一下Jekyll的安装.简略的实现了一遍 首先安装Ruby "Ruby安装文件下载地址" 下载对应版本,我 ...
- oracle10g获得Date类型字段无分，秒的解决方案！
一般的数据库中,DATE字段只表示日期,不包含日期信息,而Oracle数据库中的DATE数据类型是包含日期.时间的,对于不同的Oracle jdbc驱动版本号.对于该问题的处理都有些差别. 近期使用 ...
- Chromium Graphics Update in 2014（滑动）
原创文章,转载请注明为链接原始来源对于http://blog.csdn.net/hongbomin/article/details/40897433. 摘要:Chromium图形栈在2014年有多项改 ...
- 创建和分析excel文件
jxl.jar:下载地址:http://download.csdn.net/detail/xuxu198899223/7717737 package excel; public class BookV ...
- SQL Prompt——SQL智能提示插件
数据库是大家在项目开发中肯定会用到的,C#项目用的最多的就是微软自家的SQL Server了.不可否认,微软的Visual Studio开发平台很好用,很直观的体现就是智能提示.敲几个字符,相关的信息 ...
- MPI编程简述
第三章MPI计划 3.1 MPI简单介绍 多线程是一种便捷的模型,当中每一个线程都能够訪问其他线程的存储空间.因此,这样的模型仅仅能在共享存储系统之间移植. 一般来讲,并行机不一定在各处理器之间共享存 ...
- How many prime numbers（素数）
Problem Description Give you a lot of positive integers, just to find out how many prime numbers t ...
- jquery中DOM的操作方法
先介绍几个比较简单的方法,不经常用到,做个记录 1. filter() 方法 顾名思义,filter是一个过滤器,如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配 ...
- English is very important!
Well, as a college student,I haven't realized how important the English is . But as a web programmer ...