angularjs 模块化

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module(‘myApp‘,[]);//m1就是一个模块,ng-app可以写在div等小标签中,
m1.controller(‘Aaa‘,function($scope){//控制器名字是Aaa,函数是function,就类似于 function Aaa($scope){    $scope.name = ‘hello‘;}
    $scope.name = ‘hello‘;
});
m1.controller(‘Bbb‘,function($scope){
    $scope.name = ‘hi‘;
});

//为了防止压缩后function形参$scope改变成$s,就要下面的写法。
var m1 = angular.module(‘myApp‘,[]);
m1.controller(‘Aaa‘,[‘$scope‘,function($scope){
    $scope.name = ‘hello‘;
}]);
m1.controller(‘Bbb‘,[‘$scope‘,function($scope){
    $scope.name = ‘hi‘;
}]);

/*
function Aaa($scope){
    $scope.name = ‘hello‘;
}
function Bbb($scope){
    $scope.name = ‘hi‘;
}*/

</script>
</head>

<body>
<div ng-controller="Aaa">
    <p>{{name}}</p>
</div>
<div ng-controller="Bbb">
    <p>{{name}}</p>
</div>

</body>
</html>
时间: 2024-08-10 21:21:31

angularjs 模块化的相关文章

angularJS模块化之基本编程步骤

## 第一步 在主页面中:使用angular:引入所有子页面需要的js:创建视图替换的位置:## **<html ng-app="mainApp">**//////使用angular     <head lang="en">     <meta charset="UTF-8">     <title>学生管理系统</title>     <link rel="styles

用requirejs使angularJS模块化开发

首先,要用1.2以上的angular...因为这个原因浪费了我两天半的时间... 引用模块:angular-route 先加载require.js index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>{{'TODO supply a title'}}</title> 5 <meta charset="UTF-8"> 6 <meta name=&quo

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

Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 WebAPI项目主体结构 Angularjs前端主体结构 2. 前言 Angularjs开发CRUD类型的Web系统生产力惊人,与jQuery,YUI,kissy,Extjs等前端框架区别非常大,初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区,最典型的特征是在的开发过程中,使用

3-Angular的模块化

在前面的几个文章中,我们的数据都是以函数的方式定义在全局的作用域下,这样很显然是不对的,没有模块化的思想,下面的例子介绍Angular的模块化! <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.

【AngularJS】—— 7 模块化

AngularJS有几大特性,比如: 1 MVC 2 模块化 3 指令系统 4 双向数据绑定 那么本篇就来看看AngularJS的模块化. 首先先说一下为什么要实现模块化: 1 增加了模块的可重用性 2 通过定义模块,实现加载顺序的自定义 3 在单元测试中,不必加载所有的内容 之前做的几个例子,控制器的代码直接写在script标签里面,这样声明的函数都是全局的,显然不是一个最好的选择. 下面看看如何进行模块化: <script type="text/javascript">

AngularJs中的模块化

一个简单的 angularJs 例子如下所示: <!DOCTYPE html> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> </head> <b

AngularJs学习笔记7——四大特性之模块化设计

模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module('fan02',['ng','fan']); 就调用fan02模块中所定义的东西 2.ng内置的模块的用法 (1) ngRoute模块(路由模块) AngularJS是一个开源的js框架.用在数据操作比较频繁的场景下,用于SPA应用 单页面应用的工作原理: 1.页面url:http://127.0.0

AngularJS的模块化操作。

在Javascript中,模块化的开发模式有很多优点,我就在网上找了几点,不管你懂不懂,反正我是不懂模块化开发的. 现在业界比较规范的是AMD,研究模块化开发可以使用比较流行的require.js库来实现模块化的开发,推荐阅读Snandy 的相关系列文章(相当给力):http://www.cnblogs.com/snandy/category/360589.html 使用模块能给我们带来许多好处,比如: 1 : 保持全局命名空间的清洁: 2 : 编写测试代码更容易,并能保持其清洁,以便更容易找到