AngularJS (前端MVC框架)

简介: AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS的核心特点是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入。 适用于:构建CRUD web应用。(CDUQ,数据的增删改查)。 不适用于:游戏,图形界面编辑器。这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS的核心特点是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入。
适用于:构建CRUD web应用。(CDUQ,数据的增删改查)。
不适用于:游戏,图形界面编辑器。这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

参考

官方API :  http://docs.ngnice.com/api/
慕课网教程:   http://www.imooc.com/learn/156

MVC

M,Model,数据模型
V,View,视图,负责向用户展示的部分
C,Controller,业务逻辑和控制逻辑

基础语法

AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值) 绑定到应用程序。
ng-bind 指令把应用程序数据 绑定到 HTML 视图。
{{表达式}}   等同于ng-bind

AngularJS 控制器

ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素

AngularJS 模块


模块定义了您的应用程序。所有的控制器都应该属于一个模块。模块保持全局命名空间中的整洁。
在本实例中,"myApp.js" 包含了一个应用程序模块定义,"myCtrl.js" 包含了一个控制器:
<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>
		

//myapp.js
var app = angular.module("myApp", []); 

//myCtrl.js
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

注意:
angular. module(naAppName, [dependentModule1,...,dependentModuleN ]) //一个ng-app对应着一个module,这个是定义。注意不能重复定义!
angular. module(naAppName)//定义完ngApp的模块之后,可通过此函数获得naAppName对应的模块,用来绑定多个控制器。

函数的传参

例:
<!-- 传参要这样传,url会自动被$scope.url内容替换 -->
<button ng-click='setInitialUrl(url)'>确定</button>
<!-- 若传真假,这样做就是对的-->
<button ng-click='collectService(true)'>是</button>

控制器间的通信

共享变量
通过service,即angular.module().service(name,fun)。这么做有一个问题,$watch()不能捕获service中变量的改动,有这种需求的话就只能靠通信了。
通信:ng的控制器是有继承关系的。控制器向父级发$emit()事件,向子级发$broadcast()事件,事件接收方实现$on()即可完成通信。例子转自 http://blog.51yip.com/jsjquery/1602.html。
html
<div ng-controller="ParentCtrl">                  //父级
    <div ng-controller="SelfCtrl">                //自己
        <a ng-click="click()">click me</a>
        <div ng-controller="ChildCtrl"></div>     //子级
    </div>
    <div ng-controller="BroCtrl"></div>           //平级
</div>
js
phonecatControllers.controller('SelfCtrl', function($scope) {
    $scope.click = function () {
        $scope.$broadcast('to-child', 'child');
        $scope.$emit('to-parent', 'parent');
    }
});

phonecatControllers.controller('ParentCtrl', function($scope) {
    $scope.$on('to-parent', function(d,data) {
        console.log(data);         //父级能得到值
    });
    $scope.$on('to-child', function(d,data) {
        console.log(data);         //子级得不到值
    });
});

phonecatControllers.controller('ChildCtrl', function($scope){
    $scope.$on('to-child', function(d,data) {
        console.log(data);         //子级能得到值
    });
    $scope.$on('to-parent', function(d,data) {
        console.log(data);         //父级得不到值
    });
});

phonecatControllers.controller('BroCtrl', function($scope){
    $scope.$on('to-parent', function(d,data) {
        console.log(data);        //平级得不到值
    });
    $scope.$on('to-child', function(d,data) {
        console.log(data);        //平级得不到值
    });
});
点击Click me的输出结果为 :
child  
parent 




目录
相关文章
|
25天前
|
前端开发 JavaScript Java
基于Vue+ElementUI框架实现学生管理系统前端页面设计
基于Vue+ElementUI框架实现学生管理系统前端页面设计
|
8天前
|
编解码 前端开发 JavaScript
前端框架与库 - Bootstrap响应式设计
【7月更文挑战第19天】Bootstrap是流行的前端框架,以其响应式设计和组件库闻名。响应式设计确保网站在不同设备上显示良好。关键包括:**网格系统**,基于12列布局,适应屏幕尺寸;和**媒体查询**,用于根据设备特性应用样式。开发者常遇到的问题有:网格列超过12、忽视断点和自定义样式冲突。解决方法涉及正确使用断点类、测试多设备及清晰注释代码。借助官方文档和实践,可有效掌握响应式设计。
|
25天前
|
前端开发 JavaScript
前端框架的选型、分类、常用框架整理(含官网链接)
前端框架的选型、分类、常用框架整理(含官网链接)
36 7
|
22天前
|
前端开发 JavaScript 开发者
三大微前端框架,谁是你的理想型?
【7月更文挑战第4天】React、Vue和Angular在微前端领域表现出色,各具优势。React以其组件化和高效生态受青睐,Vue以简洁和渐进式设计赢得人心,Angular则凭借全面功能和类型系统脱颖而出。选择框架需考虑项目需求、团队技能及技术栈兼容性。例如,React组件可通过虚拟DOM高效管理状态,Vue组件易于集成,而Angular组件利用模块化和依赖注入支持独立部署,但学习成本较高。每个框架的组件示例展示了其在微前端中的应用潜力。最终选择无定论,关键在于适应性。
24 2
|
1月前
|
开发框架 小程序 前端开发
uni-app前端应用开发框架
uni-app对做移动端开发的来说应该无人不知、无人不晓了吧?!从名字就能看出来这个框架要干啥,unify app——没错,就是统一前端应用开发,不管你是小程序、app、还是H5、公众号,用这个框架都能做。uni-app让开发者编写一套代码,就可以编译为安卓app、ios app、微信小程序、抖音小程序、支付宝小程序等十几个平台,而且马上支持纯血鸿蒙了,这简直是个人、开发工作室、小型开发公司的福音,开发一些常规的app、小程序,用这个框架足够了。
31 7
|
1月前
|
前端开发 JavaScript 数据管理
引领潮流:React框架在前端开发中的革新与实践
React,始于2013年,由Facebook驱动,以其组件化、Virtual DOM、单向数据流和Hooks改革前端。组件化拆分UI,提升代码复用;Virtual DOM优化渲染性能;Hooks简化无类组件的状态管理。庞大的生态系统,包括Redux、React Router等库,支持各种需求。例如,`useState` Hook在计数器应用中实现状态更新,展示React的实用性。React现已成为现代Web开发的首选框架。【6月更文挑战第24天】
166 2
|
12天前
|
资源调度 前端开发 JavaScript
|
1月前
|
开发框架 前端开发 JavaScript
【前端】前端的三大主流框架
【前端】前端的三大主流框架
37 3
|
1月前
|
前端开发 JavaScript 测试技术
web前端语言框架:探索现代前端开发的核心架构
web前端语言框架:探索现代前端开发的核心架构
29 4
|
25天前
|
JavaScript 前端开发 开发者
前端核心框架Vue指令详解
前端核心框架Vue指令详解