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 




目录
相关文章
|
20天前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
28 0
|
2月前
|
前端开发 Java 程序员
从零基础手写Spring MVC框架,准备好进阶程序员了吗?
我们程序员大部分人都是野路子,不懂什么叫代码规范。写了一个月的代码,最后还得其他老司机花3天时间重构,相信大部分老司机都很头疼看新手的代码。
23 1
|
9天前
|
前端开发 安全 Java
使用Java Web框架:Spring MVC的全面指南
【4月更文挑战第3天】Spring MVC是Spring框架的一部分,用于构建高效、模块化的Web应用。它基于MVC模式,支持多种视图技术。核心概念包括DispatcherServlet(前端控制器)、HandlerMapping(请求映射)、Controller(处理请求)、ViewResolver(视图解析)和ModelAndView(模型和视图容器)。开发流程涉及配置DispatcherServlet、定义Controller、创建View、处理数据、绑定模型和异常处理。
使用Java Web框架:Spring MVC的全面指南
|
15天前
|
前端开发 JavaScript Java
MVC框架:SpringMVC(三)
MVC框架:SpringMVC
30 0
|
15天前
|
JSON 前端开发 JavaScript
MVC框架:SpringMVC(二)
MVC框架:SpringMVC
35 0
|
15天前
|
前端开发 Java 应用服务中间件
MVC框架:SpringMVC(一)
MVC框架:SpringMVC
58 0
|
24天前
|
资源调度 前端开发 JavaScript
推荐一款可以自动创建视频的前端Ract框架
推荐一款可以自动创建视频的前端Ract框架
|
30天前
|
开发框架 前端开发 JavaScript
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
76 1
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
|
1月前
|
开发框架 前端开发 JavaScript
未来趋势:前端开发框架的革新与发展
随着技术的不断进步和市场需求的变化,前端开发框架也在不断革新和发展。本文将探讨当前前端开发框架的最新趋势,并展望未来可能的发展方向。
|
1月前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)