3-Angular的模块化

在前面的几个文章中,我们的数据都是以函数的方式定义在全局的作用域下,这样很显然是不对的,没有模块化的思想,下面的例子介绍Angular的模块化!

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AngularJs模块化</title>
<script type="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js">
</head>
<body>

<div ng-controller=‘Aaa‘>
    <p>{{name}}</p>
</div>

<div ng-controller=‘Bbb‘>
    <p>{{name}}</p>
</div>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[]);//参数1:模块的名字,参数2:当前模块中依赖的模块,後面的文章会介绍

m1.controller(‘Aaa‘,function($scope){
    $scope.name = ‘hello AngularJs‘;
});
m1.controller(‘Bbb‘,function($scope){
    $scope.name = ‘Hi‘;
});
</script>
</body>
</html>

首先在html上绑定初始化的名称,并附上myApp,使用angular.model在JS中定义多个模块,并附上参数。

再使用控制器定义数据,注意控制器传递的参数,模块名和匿名函数。

都知道我们的项目在上线後合并压缩的,这样我们匿名函数传递的形参在压缩後出现问题,所以这个时候我们需要将参数包裹成数组,来避免压缩的问题!

m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
    $scope.name = ‘hello AngularJs‘;
}]);
m1.controller(‘Bbb‘,[‘$scope‘,function($scope){
    $scope.name = ‘Hi‘;
}]);

学习笔记,如有不足,请指正!转载请保留原文链接,谢谢。

最後,微博求粉,谢谢。

时间: 2024-08-03 22:36:07

3-Angular的模块化的相关文章

通过Web Api 和 Angular.js 构建单页面的web 程序

在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端,接下来服务器将会发送一个新的页面给浏览器. 但是在单页面应用程序中,整个页面只是在浏览器一开始请求的时候才会加载,接下来的请求,下来的交互请求都是通过ajax 来完成的,这就意味着只有部分的页面会更新,并不需要去加载整个的页面,这就减少了对用户操作的响应时间,从而使用户有一个更流畅的体验.但是在传统

angular template浅析

在我们浏览的页面中有大的网站,也有中小型网站,类型不同其中的页面也就不同,但是纵观大部分的网页是否有什么相同的地方呢?如果浏览的是一般的门户网站或者是什么小型的页面的话这种感觉就不是很明显,但是如果关注一些较为大型的点上网站的话,就会发现一个非常明显的特征,那就是每一个页面除了中间body的内容有所变化之外,一个页面的header和footer的变化几乎是一模一样的,当然如果我们每一个页面都做header和footer的话也可以的,但是,如果还有一些div啊 什么section等等的如果在每一个

Angular.js初步认知

第一部分  Angular.js简介 Angular.js是一款基于JavaScript语言的框架,目的是为了克服HTML在构建应用上的不足. 注意这里说的Angular.js是框架而不是类库,类库和框架都是用来解决静态页面技术上构建动态应用的问题的,但是两者却不是一个概念. 类库: 指一些函数的集合,封装一些可复用的代码块,但是类库本身需要开发者主动调用各种方法才能实现功能,如jQuery等. 框架: 指一种特殊的,已经实现了的WEB应用,框架会根据开发者填充的具体业务逻辑来调用开发者写的代码

Angular 2 应用的 8个主要构造块

前面的话:最近空余时间在学 Angular 2,国庆节的时候看了官网的quickstart,还写了一篇文章,只是一个hello world demo.后面继续看了它的一个项目教程,刚开始还可以跟上,当后面就比较混乱了.的确,对于新手来讲,要了解一个框架还是比较麻烦的.所以停止项目,开始看看 angular 的整体框架是如何的,联系项目,分析下,慢慢来. 学习链接:中文官网 正文开始: angular 应用:用带 angular 拓展语法的 HTML 写模板,用组件类管理这些模板,用服务添加应用逻

行如风 Angular初识

本人接触前端代码时间并不长,其中css .html.js以及jquery库是前端知识的基础,其他一些人可能还接触过php,java等后台的代码,这里就不多废话进入正题:) 大家可能刚开始接触前端知识的时候尤其对jquery库有了先入为主的概念(特别是刚开始就学习的jquery而不是angular.vue等其他前端框架的童鞋),这样的话可能会导致大家在学习Angular框架的时候,思维模式难以转变: Jquery主要是获取DOM节点(是非模块化的),然后对节点进行操作,如下: 修改一个类名为abc

07模块化-AngularJS基础教程

0. 目录 目录 前言 正文 1 Why use Angular modules为什么使用模块化 2 创建应用模块-Creating the application module 3 加载应用模块-Loading the application module 4 定义控制器-Defining a controller 5 链式定义-Chaining definitions 6 加载模块-Loading modules 10 结论 声明 1. 前言 AngularJS是为了克服HTML在构建应用上

angular2框架搭建,angular-cli使用,angular2学习

angular红红火火很多年了,一眨眼ng4都出来了,我也只能叹息前端的日新月异,以及感叹自己永远追赶不上时代的步伐,但是没关系,一个优秀的前端不在于他懂的无数的框架,而在于遇到问题时候懂得如何学习,如何解决,所以当你需要用到一个新技术的时候,你可以很快的上手,如何学习,就非常重要,学习的途经有很多,每个人都有自己的方法.所以良好的学习能力比你走马观花的了解重要得多,当然为了求职,走马观花很重要,但对于职业生涯显得没那么重要,骚年,好好培养自己的学习能力吧,有朝一日必定大有用途. 废话不多了,我

require&#39;模块化jquery和angular问题

require 模块化开发问题,正常自己写的模块 是exports 导出一个模块 //模块化引入jquery 不同和问题 require 引入jquery swiper .... 插件和库的时候需要 require.config({ baseUrl:"js/libs", //文件夹目录相对与html的位置 paths:{ 'jquery':"jquery-1.9.1" //插件或库的文件名 'swiper':"文件名/swiper" //当每个插

Angular 结合RequireJs实现模块化开发

angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图: 传统开发方式 <!--aaa模块--> <div> <h3>this is aaa</h3> <input type="text" ng-model="asd">{{asd}} <button ng-click="submit()">subm