目录

2. 前言

Angularjs开发CRUD类型的Web系统生产力惊人,与jQuery,YUI,kissy,Extjs等前端框架区别非常大,初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区,最典型的特征是在的开发过程中,使用大量的 指令(directive) 来实现许多操作DOM的功能,从而失去了angularjs快速开发的特性,最后不得不放弃使用。此系列的文章并不会像其他介绍Angularjs技术文档一样将每个技术细节统统照顾到,而是通过实战项目先让初学者有个大概的了解,然后大家在由浅入深逐渐熟悉每一个细节。

 

Github Angularjs

写此博客的时候angularjs官方稳定版已经更新到 “1.4.2”,内部测试版更新到“2.0.0-alpha.30”

本篇博客使用angularjs 1.4.2 版本

angularjs 1.4.2下载地址

首先放一个招牌Demo:

<!--设置angularjs在页面上的访问域-->
<html ng-app="Yiim">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
//创建一个app模块(你就想象成C#里面的一个类库吧)
var app = angular.module("Yiim", []);
//在app模块中创建一个"tmplController"控制器
app.controller("tmplController", ["$scope", function ($scope) {
//设置(val)变量值
$scope.val = "Google是最棒的搜索引擎。";
}]);
})()
</script>
</head>
<body>
<!--设置当前div的控制器为"tmplController"-->
<div ng-controller="tmplController">
<div>{{val}}</div>
</div>
</body>
</html>

点击此运行

3.Angularjs名词与概念

2.1 单页Web应用(SinglePage):

顾名思义,只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,实现操作各种操作。

2.2 模板(template):

这里的模板是指前端模板,在angularjs 之外已经有非常丰富的JavaScript模板引擎了,例如artTemplate,Mustache,doT.js等。

Angularjs 内置有自己的模板引擎。

通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs 模板解释</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
var app = angular.module("Yiim", []); //创建模块
app.controller("tmplController", ["$scope", function ($scope) {
//给变量val赋值
$scope.val = "Google是最好的搜索引擎";
//给变量list赋值
$scope.list = [
{ title: "博客园", url: "http://www.cnblogs.com" },
{ title: "知乎", url: "http://www.zhihu.com" },
{ title: "codeproject", url: "http://www.codeproject.com/" },
{ title: "google", url: "http://www.google.com/" }
]
//给变量hasValue赋值
$scope.hasValue = false;
}]);
})()
</script>
</head>
<body ng-app="Yiim">
<div ng-controller="tmplController">
<!--普通输出-->
<div>{{val}}</div>
<!--循环-->
<ul ng-repeat="item in list">
<li><a href="{{item.url}}" rel=nofollow>{{item.title}}</a></li>
</ul>
<!--条件语句-->
<div ng-if="!hasValue">
Angularjs条件语句
</div>
</div>
</body>
</html>

点击此运行

以上代码首先创建一个"Yiim"模块,然后在模块中添加了一个名词为"tmplController"的控制器,然后给scope添加三个属性“val”,“list”,“hasValue”,并赋值。

在模板页面设置angularjs作用域为"body"标签内,名词为"Yiim"

<body ng-app="Yiim">

在作用域中设置控制器为"tmplController"

 <div ng-controller="tmplController">

例子中提供了3种输出方式(普通输出,循环,条件语句),当然angularjs不仅仅这几种方式

“ng-repeat”,“ng-if” 这都是通过指令实现。我们在下一节(2.5 )将详细讲解

2.3 控制器(controller):

控制器可以理解为控制页面某个区块的方法。其中有一个非常重要的对象 $scope是这个控制器与页面控制器区域沟通的桥梁。angularjs最精华的部分是双向绑定,失去了双向绑定angularjs就失去了自己的灵魂。这也是和其他以DOM操作的框架比最大的区别。放DEMO

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs控制器介绍</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
(function () {
var app = angular.module("Yiim", []);
app.controller("cntoController", ["$scope", function ($scope) {
var defaults = "知乎 - 与世界分享你的知识、经验和见解";
//设置值
$scope.val = defaults;
$scope.click = function () {
$scope.val = defaults;
};
}]);
})()
</script>
</head>
<body ng-app="Yiim">
<div ng-controller="cntoController">
<!--绑定值-->
<div><textarea ng-model="val"></textarea></div>
<!--输出值-->
<div>{{val}}</div>
<!--绑定方法-->
<div><button ng-click="click()">重置</button></div>
</div>
</body>
</html>

控制器演示效果 点击此运行

与2.2节例子相同是,我们首先创建了一个模块,然后在模块中添加一个控制器方法 "cntoController".

在控制器里我们给scope添加了一个属性"val" 和一个方法 "click"

在页面中我们使用"ng-model"指令绑定控制器中设置的"val"

  <div><textarea ng-model="val"></textarea></div>

紧接着我们把绑定的值输出处理

 <div>{{val}}</div>

通过内置的绑定方法click 我们重置字符串

$scope.click = function () {
$scope.val = defaults;
};

2.4 路由(route):

单页Web应用由于没有后端URL资源定位的支持,需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后的字符串来定位资源,区分不同的功能模块。

路由并非在angularjs核心文件内,你需要另外加入一段脚本 “angular-route.min.js”

需要注意的是在创建 “app” 对象是需要填写对 ngRoute 依赖

  var app = angular.module("Yiim", ['ngRoute']);//注意 ngRoute

下面我们同样的展示一个demo

主页面 route.html

<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs路由介绍</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script src="http://files.cnblogs.com/files/Arrays/angular-route.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
//设置当前模块依赖,“ngRoute”,用.NET的理解就是给这个类库添加“ngRoute”引用
var app = angular.module("Yiim", ['ngRoute']);
//配置路由
app.config(['$routeProvider', function ($routeProvider) {
var route = $routeProvider;
//指定URL为“/” 控制器:“indexController”,模板:“route.html”
route.when('/list', { controller: 'listController', templateUrl: 'route-list.html' });
//注意“/view/:id” 中的 “:id” 用于捕获参数ID
route.when('/view/:id', { controller: 'viewController', templateUrl: 'route-view.html' });
//跳转
route.otherwise({ redirectTo: '/list' });
}]);
//创建一个提供数据的服务器
app.factory("service", function () {
var list = [
{ id: 1, title: "博客园", url: "http://www.cnblogs.com" },
{ id: 2, title: "知乎", url: "http://www.zhihu.com" },
{ id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
{ id: 4, title: "google", url: "http://www.google.com/" }
];
return function (id) {
//假如ID为无效值返回所有
if (!id) return list;
var t = 0;
//匹配返回的项目
angular.forEach(list, function (v, i) {
if (v.id == id) t = i;
});
return list[t];
}
}) //创建控制器 indexController
app.controller("listController", ["$scope", "service", function ($scope, service) {
//获取所有数据
$scope.list = service();
}]);
//创建查看控制器 viewController, 注意应为需要获取URL ID参数 我们多设置了一个 依赖注入参数 “$routeParams” 通过它获取传入的 ID参数
app.controller("viewController", ["$scope", "service", '$routeParams', function ($scope, service, $routeParams) {
$scope.model = service($routeParams.id || 0) || {};
}])
})()
</script>
</head>
<body>
<div><a href="#/list">列表</a></div>
<div ng-view>
</div>
</body>
</html>

列表页面 route-list.html

<ul ng-repeat="item in list">
<li><a href="#view/{{item.id}}">{{item.title}}</a></li>
</ul>

详细页面 route-view.html

<div>
<div>网站ID:{{model.id}}</div>
<div>网站名称:<a href="{{model.url}}" rel="nofollow">{{model.title}}</a></div>
<div>访问地址:{{model.url}}</div>
</div>

演示效果:点击此运行

以上代码中,我们首先配置了三条个处理个局部页面的路由

路由处理列表页并设置控制器为"listController",指定模板页为"route-list.html"

route.when('/list', { controller: 'listController', templateUrl: 'route-list.html' });

与上面不同的是第二条路由中包含":id"用于捕获URL后面的参数 。

route.when('/view/:id', { controller: 'viewController', templateUrl: 'route-view.html' });

处理所有未匹配到的路由跳转到 "'/list'"内。

route.otherwise({ redirectTo: '/list' });

我们还使用了模块方法 "factory" 创建一个"service" 服务,用于获取数据列表

后面我们声明了两个控制器"listController","viewController",同时配置对"service"的依赖,"viewController" 中我们还添加对 "$routeParams" 的依赖,用于获取路由捕获的id。

需要注意的是我们再主页面声明了"ng-view"用于指定局部页面和控制器作用范围。

<div ng-view></div>

2.5 指令(directive):

指令(directive)并不是什么高深的东西,我们简单理解为通过声明 特殊的标签,属性..等来处理浏览器无法渲染的功能。通过JavaScript将指令替换成浏览器可以识别的标签。

当前这不是它存在的唯一意义。在上面的例子中我们已经见到了“ng-if”,"ng-repeat"等这些angularjs 内置的指令。当然我们也可以定义自己使用的指令。

  1. 通过指令可以实现对DOM操作
  2. 可以跟加简洁的实现某些功能
  3. 通过指令可以集成其他插件 例如jQuery插件
<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs指令演示</title>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
var app = angular.module("Yiim", []); //创建一个提供数据的服务器
app.factory("service", function () {
var list = [
{ id: 1, title: "博客园", url: "http://www.cnblogs.com" },
{ id: 2, title: "知乎", url: "http://www.zhihu.com" },
{ id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
{ id: 4, title: "google", url: "http://www.google.com/" }
];
return function (id) {
//假如ID为无效值返回所有
if (!id) return list;
var t = 0;
//匹配返回的项目
angular.forEach(list, function (v, i) {
if (v.id == id) t = i;
});
return list[t];
}
})
//创建指令imCheck 在HTML中的语法为 im-check
app.directive("imCheck", [function () {
return {
restrict: 'A',
replace: false,
link: function (scope, element) {
var all = "thead input[type='checkbox']";
var item = "tbody input[type='checkbox']";
//当点击选择所有事便利所有项目
element.on("change", all, function () {
var o = $(this).prop("checked");
var tds = element.find(item);
tds.each(function (i, check) {
$(check).prop("checked", o);
});
});
//子项修改时的超值
element.on("change", item, function () {
var o = $(this).prop("checked");
var isChecked = true;
if (o) {
element.find(item).each(function () {
if (!$(this).prop("checked")) {
isChecked = false;
return false;
}
return true;
});
}
element.find(all).prop("checked", o && isChecked);
});
}
};
}]) app.controller("dectController", ['$scope', 'service', function ($scope, service) {
$scope.list = service();
}])
})();
</script>
</head>
<body>
<!--注意一下标签 im-check 指定使用的指令-->
<table ng-controller="dectController" im-check>
<thead>
<tr>
<th><input type="checkbox">选择</th>
<th>网站ID</th>
<th>网站名称</th>
<th>链接地址</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td><input type="checkbox"></td>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.url}}</td>
</tr>
</tbody>
</table>
</body>
</html>

演示效果 点击此运行

上面的例子中,我们使用模块创建了一个指令"imCheck",并在指令方法"link"注册了使用当前指令的dom对象注册了两个delegate方法 处理全选和子选择项状态改变处理的方法。

"imCheck" 对应在html页面的属性为 "im-check" 注意大小写

<table ng-controller="dectController" im-check>

还要注意的是我们使用了jQuery来操作dom节点。

2.6 前端模块化开发:

模块化开发不是什么新鲜的概念,后端开发过程中包,类库这些把功能相近的东西放在一起。前端开发很长一段时间混乱无比,脚本之间的冲突,依赖,变量函数覆盖各种奇奇怪怪的问题。模块化开发在前端的定义:将功能相近的组件封装到一块,通过前端依赖注入解决依赖顺序和变量作用域的问题. 代表框架有Seajs,Requirejs

使用模块化编程实现angularjs多种模块,解决依赖问题

<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs 模块化开发</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
//创建一个Yiim.service 模块
var service = angular.module("Yiim.service", []);
//创建一个Yiim.controller 模块
var controller = angular.module("Yiim.controller", []);
//指令模块
var directive = angular.module("Yiim.directive", []);
//过滤器模块
var filter = angular.module("Yiim.filter", []); //Yiim.service添加一个服务
service.factory("service", [function () {
return { key: "Service" };
}]);
//Yiim.controller添加一个控制器
controller.controller("indexController", ['$scope', 'service', function ($scope, service) {
$scope.service = service;
}]); //获取依赖
var app = angular.module("Yiim", ['Yiim.service', 'Yiim.controller', 'Yiim.directive', 'Yiim.filter']);
})();
</script>
</head>
<body>
<div ng-controller="indexController">{{service.key}}</div>
</body>
</html>

点击此运行

2.7 过滤器(filter):

angularjs过滤器,用来格式化数据(转化,排序,筛选等操作)。

<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs 过滤器</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
var app = angular.module("Yiim", []);
app.controller("namesController", ["$scope", function ($scope) {
$scope.names = [
{ "Name": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" },
{ "Name": "Berglunds snabbköp", "City": "Luleå", "Country": "Sweden" },
{ "Name": "Centro comercial Moctezuma", "City": "México D.F.", "Country": "Mexico" },
{ "Name": "Ernst Handel", "City": "Graz", "Country": "Austria" },
{ "Name": "FISSA Fabrica Inter. Salchichas S.A.", "City": "Madrid", "Country": "Spain" },
{ "Name": "Galería del gastrónomo", "City": "Barcelona", "Country": "Spain" },
{ "Name": "Island Trading", "City": "Cowes", "Country": "UK" },
{ "Name": "Königlich Essen", "City": "Brandenburg", "Country": "Germany" },
{ "Name": "Laughing Bacchus Wine Cellars", "City": "Vancouver", "Country": "Canada" },
{ "Name": "Magazzini Alimentari Riuniti", "City": "Bergamo", "Country": "Italy" },
{ "Name": "North/South", "City": "London", "Country": "UK" },
{ "Name": "Paris spécialités", "City": "Paris", "Country": "France" },
{ "Name": "Rattlesnake Canyon Grocery", "City": "Albuquerque", "Country": "USA" },
{ "Name": "Simons bistro", "City": "København", "Country": "Denmark" },
{ "Name": "The Big Cheese", "City": "Portland", "Country": "USA" },
{ "Name": "Vaffeljernet", "City": "Århus", "Country": "Denmark" },
{ "Name": "Wolski Zajazd", "City": "Warszawa", "Country": "Poland" }
];
}])
})()
</script>
</head>
<body>
<div ng-controller="namesController">
<p>输入过滤:</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'Country'">
{{ (x.Name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
</body>
</html>

演示效果 点击此运行



我们使用angularjs内置的过滤器 "filter","orderBy"。

x in names | filter:name | orderBy:'Country'

含义为将集合 "names" 传入过滤器 "filter"匹配字符串为"name"的项目,然后将匹配后的集合传入 "orderBy"过滤器,以"Country"属性进行排序。

在输出变量时我们使用"uppercase"过滤器转化大小写

x.Name | uppercase

如果这篇文章对你有帮助,麻烦帮忙点个推荐啦。

Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念(一)的更多相关文章

  1. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...

  2. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  3. Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 基本功能演示(二) 非常抱歉这个月实在太忙,一直 ...

  4. Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现(三)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 系统业务与实现(二) 上一章我们讲解的 Angu ...

  5. Angularjs,WebAPI 搭建一个简易权限管理系统 —— WebAPI项目主体结构(四)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 5.0 WebAPI项目主体结构 5.1 总体结 ...

  6. [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统

    一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...

  7. AngularJs打造一个简易权限系统

    AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...

  8. 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移

    本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...

  9. express + mongodb 搭建一个简易网站 (四)

    express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...

随机推荐

  1. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  2. ux.form.field.SearchField 列表、树形菜单查询扩展

    //支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: ' ...

  3. MyBatis知多少(21)更新操作

    上一章展示了如何使用MyBatis对表进行读取操作.本章将告诉你如何在一个表中使用MyBatis更新记录. 我们已经在MySQL下有EMPLOYEE表: CREATE TABLE EMPLOYEE ( ...

  4. 七牛portal可用性测试记

    引言:2013年年底应七牛公司朋友的邀请,给他们的Portal进行可用性测试.七牛(http://www.qiniu.com/)一直专注于云存储基础服务,在业内颇有声誉.七牛云存储的后台选用并不常用的 ...

  5. 前端技术Bootstrap的hello world

    ----对于用户来说,界面就是程序本身.那么一个漂亮的web一定是你继续使用这个应用的前题. 这一节我们来一起写个Bootstrap的hello wrold. Bootstrap Bootstrap  ...

  6. 谷歌联合 Adobe 发布 Noto 字体【免费下载】

    Noto 涵盖了世界上所有主要语言,包括欧洲,非洲,中东,印度语,南亚和东南亚,中亚,美洲和东亚语言.也支持几个少数民族和历史语言.不久前,还发布了针对文.日文.韩文的开源字体——Noto Sans ...

  7. 第一次接触终极事务处理——Hekaton

    在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...

  8. CMD魔法堂:支持显示UTF8编码的中文

    一.前言 在Unbuntu中用sqlite3-command-line操作sqlite3还好好的,到了windows下查询表内容时发现中文全部乱码了!马上想到sqlite3内部使用utf-8对字符进行 ...

  9. MongoDB安装说明以及MongoVUE使用

    简单介绍mongoDb MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产 ...

  10. 使用RazorEngine对ASP.NET MVC的Views进行UnitTest

    有的时候我们需要对Razor最后生产的文本(HTML OR XML OR..)进行单元测试. 使用Nuget安装RazorEngine. 新建一个ASP.NET MVC项目,并且带有测试项目. 修改I ...