2017-09-12 00:24:23 xyphf 阅读数 1255

今天我们主要介绍一下Angular WebApp常见的结构图


Angular Webapp常见的结构图


AngularJS首先它会有一个根模块(root module),它会直接绑定在我们的HTML文档上面。

然后这个模块也会引用一些第三方的其他模块,每个模块都会和这个根模块差不多,都分为几类web组件,这些组件在AngularJS文档上面被统称为web components,也就是所谓的Web组件。

它们的职能是不一样的,我们介绍的是四种重要的组件。服务service指令directive过滤器filter控制器controller

一个完整的Webapp中有个非常重要的模块,叫做路由模块(router module),专门为了处理路由而设计的,路由模块就是监听浏览器的哈希值变化,然后加载不同HTML代码,这种HTML代码就被称之为视图。

当然光有页面肯定不行,我们还需要对应的处理逻辑,那么这个页面对应的逻辑放到控制器controller里面,控制器controller和视图view有个特殊的机制,叫做MVVM,称为双向数据绑定

也就是说视图和控制器中模型是可以随时互相影响的。视图中一些数据发生变化的时候,会影响到控制器;
控制器数据发生变化的时候也会影响到视图;而这个绑定的东西就是$scope对象

controller大部分情况下是和视图进行绑定的;directive也在一部分情况下和视图进行绑定,当然它的绑定也是通过$scope对象。

2016-11-29 00:09:32 qq_30100043 阅读数 557

Angular js 的特性:

MVC

模块化和依赖注入

双向数据绑定

指令和ui控件

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

在angular中,模型是指scope中的变量,视图是html代码模板,控制器就是angular的controller。


<!doctype html>
<html lang="en" ng-app="mymodule">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
	<div>
		<div ng-controller="firstController">
			此处显示的是双向数据绑定的名字:{{name}}<br>
			此处显示的根作用域里面的变量age:{{age}}<br>
			此处使用的ng-bind指定绑定的变量:<span ng-bind="name"></span><br>
			此处可以修改测试双向数据绑定:<input type="text" name="" id="" value="" ng-model="name" /><br>
		</div>
		<div ng-controller="secondController">
			{{name}}<br>
			{{age}}<br>
		</div>
		这里是自定义的一个指令:<br>
		元素形式:<aaa></aaa>
		属性形式:<div aaa></div>
		类名字形式:<div class="aaa"></div>
		注释形式:<!-- directive: aaa -->
	</div>
	<script type="text/javascript">
		var mymodule = angular.module("mymodule",[]);
		mymodule.controller("firstController",["$scope","$rootScope",function(a,b){
			a.name="zhangsan";
			b.age = "666";
		}]);
		mymodule.controller("secondController",function($scope,$rootScope){
			$scope.name = "李四";
		});
		mymodule.directive("aaa",function(){
			return {
				restrict : "EACM",//E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用
				replace:true,//这个在注释使用的时候必须加上才管用
				template : "<h1>这是我自定义的指令</h1>"
			};
		});
	</script>
</body>
</html>



上面的这个例子中,元素标签中的ng开头的属性就是angular的指令,在input中输入内容,别的地方也绑定此变量的值也跟着变动,这就是angular的特色,双向绑定。ng-app一般页面中只会出现一个,用于划分angular操作dom的区域,也是$rootScope变量所能修改的区域,里面包含两个controller,两种引入的方式都正确,第一种是为了压缩代码所写的一种方式。但是,这种变量名字不能写错,否则angular找不到区域位置,无法处理。

angular将很多在特殊环境使用的内容都进行的模块化,就是在需要的时候可以引入,不需要的话就不引入,需要的使用用module方法依赖注入即可。


这是我初学angular的一些理解,如有问题或者错误的地方请指出,谢谢!!!

2016-07-15 14:20:19 u014787301 阅读数 1586

今天上午,尝试实现了angular webapp的环境搭建。

1.创建express应用框架

express -e angular-demo

2.配置angular开发环境

(1)修改app.js配置

1.使用

//让ejs能够识别html后缀
app.engine('.html', require('ejs').__express);
//设置之后只需写文件名即可识别为html文件
app.set('view engine', 'html');

代替

app.set('view engine', 'ejs');

主要目的是为了让ejs引擎识别html模版,并忽略模版后缀名时,自动解析成.html后缀。

2.使用

// angular启动页
//设置angular: 启动路径为”/”
//设置angular: 启动文件为app/index.html
app.get('/', function (req, res) {
    res.sendfile('app/index.html');
});

来代替

app.use('/', routes);
app.use('/users', users);

我们的意图是把两个路由忽略,把路由直接指向app目录下的index.html文件。(现在我们还没创建app目录,一会创建。)

3.修改

//配置资源路径
app.use(express.static(path.join(__dirname, 'public')));

//配置资源路径
app.use(express.static(path.join(__dirname, 'app')));

原本我们的资源路径默认在public路径下,现在我们指向app目录。(如刚才所说,app目录一会创建。)

(2)创建app目录

创建

  • app目录
    • scripts目录(js脚本目录)
      • angular目录(js 的angular脚本目录)
        • app.js(angular全局项目配置文件目录)
        • controller.js(angular全局控制文件目录)
    • styles目录(样式目录)
      • main.css
    • views目录
      • component目录(html的自定义组件目录)
      • tpl 目录(存放html的目录)
        • welcome.html (欢迎页)
    • index.html(入口文件)

删除public目录和views目录。替代项都已经写在app目录里了。

(3)配置bower

首先全局安装bower

npm install bower -g

创建bower的json配置文件

bower init

填写问配置文件信息后,添加依赖项:

 "dependencies": {
      "angular": "~1.2.12-build.2226",
      "angular-route": "~1.2.12-build.2226"
}
bower install

下载所有angular依赖项。

3. 编写简单的angualer项目

(1) app/index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>Angular-basic</title>
    <link rel="stylesheet" href="/styles/main.css">
</head>
<body ng-app="app">

<ul>
    <li>hello  angular</li>
</ul>

<div ng-view></div>

<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/scripts/angular/app.js"></script>
<script src="/scripts/angular/controllers.js"></script>

</body>
</html>

(2) app/scripts/app.js

'use strict';

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {templateUrl: '/views/tpl/welcome.html', controller: 'WelcomeCtrl'})
        .otherwise({redirectTo: '/'});
    $locationProvider.html5Mode(true);
}]);

(3) app/scripts/controllers.js

'use strict';

function WelcomeCtrl($scope){
    $scope.username = 'Conan_Z';
}

(4) app/views/tpl/welcome.html

<hr/>
<form class="form-inline" role="form">
    <div class="form-group">
        <label>Welcome</label>
        <input type="text" class="form-control" ng-model="username" placeholder="Enter email">
    </div>
</form>
<p> {{ username }}</p>

(5) 以上四处修改的解析

首先在index.html文件的body上使用ng-app设置模块的作用域为body,取名为app。

然后应用app.js作为angular的全局配置文件。在其中使用angular.module方法,创建一个angularjs模块;并添加了该模块所依赖的模块集合:ngRoute;最后对该模块进行了配置

引用controllers.js作为angular的全局控制器,定义了WelcomeCtrl控制器对应的方法。

在app.js的模块配置中,将welcome.html模版配合controller.js的控制器,输出到index.html的ng-view中。

4.运行

实现。一个简单的angulaerjs的demo。

2016-12-09 00:32:07 qq_30100043 阅读数 609

ionic路由

这是一个超级简单的ui-route路由,因为ionic用的是ui-route,而不是angular的ng-router,第三个属于内联模块

<!DOCTYPE html>
<html ng-app="myapp">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height" />
		<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css"/>
		<script src="lib/ionic/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body ng-controller="mycontroller">
		<button class="button" ui-sref="first">first</button>
		<button class="button" ui-sref="second">second</button>
		<button class="button" ui-sref="third">third</button>
		<div ui-view></div>
		<script type="text/ng-template" id="third.html">
			<h1>this is third html</h1>
		</script>
	</body>
	<script type="text/javascript">
		var app = angular.module("myapp",["ionic"]);
		app.config(function($stateProvider){
			$stateProvider.state("first",{
				templateUrl:"first.html"
			}).state("second",{
				templateUrl:"second.html"
			}).state("third",{
				templateUrl:"third.html"
			});
		});
		app.controller("mycontroller",function($scope,$state){
			$state.go("first");
		});
	</script>
</html>
ionic对ui-route进行了封装,

<div ui-view></div>
修改为

<ion-nav-view></ion-nav-view>
尽管在模板视图中可以随便写 HTML,但是,在 ionic 中,我们总是使用指令  ion- -w view 来 作
为模板视图内容的容器,这是为了与 ionic 的导航框架保持兼容:
<script id="..." type="text/ng-template">
<ion-view>
<!--模板视图内容-->
</ion-view>
</script>
ion- view  指令有一些可选的属性:
view- title - 视图标题文字
模板被载入导航视图  ion- nav-view 显示时,这个属性值将显示在导航栏  ion- - nav- -r bar 中
cache-view - 是否对这个模板视图进行缓存
允许值为:true | false,默认为 true
 hide-back-button -是否隐藏导航栏中的返回按钮
当模板被载入导航视图时,如果之前有其他的模板,那么在导航栏  ion-nav-bar 上默认会自动显示返回按钮(使用指令  ion-nav-back-button 定义)。点击该按钮将返回前一个模板。

hide-back-button 的允许值为:true | false ,默认为 false
注意: :必须在导航栏中显式地声明返回按钮,否则即使将hide-back-button属性设为false,
这个按钮也不会出现:-)

hide-nav-bar - 是否隐藏导航栏
允许值为:true | false ,默认为 false

上面属性都是设置ion-nav-bar的,这个是放在容器外面专门显示头部导航栏的

ion-nav-bar 指令用来声明一个居于屏幕顶端的导航栏,它的内容随导航视图 的状态变化
而自动同步变化:

<ion-nav-bar></ion-nav-bar>
ion-nav-bar  有以下可选的属性:
  align-title 标题对齐方式
允许值为: left | right | center。默认为 center,居中对齐
  no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。
允许值为:true | false。默认为 true,这意味着如果视图中的内容下拉很长,那么在任
何时刻 点击导航栏都可以立刻回到内容的开头部分。

回退按钮 : ion-nav-back-button
ionic 的指令  ion-nav-back-button 指令可以自动地让你回退到前一个视图:

<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
当视图切换时,回退按钮会自动出现在导航条中,并显示前一个视图 的标题。点击回退按
钮将返回前一个视图。
ion-nav-back-button  定制样式
我们可以定制回退按钮的图标、文本和样式。

现在,我们就可以改成这样~~~~

<!DOCTYPE html>
<html ng-app="myapp">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height" />
		<link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css" />
		<script src="lib/ionic/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>

	<body ng-controller="mycontroller">

		<!--导航框架之导航栏-->
		<ion-nav-bar class="bar-positive" align-title="center">
			<!--添加下面的标签,切换页面后会有左上角的返回键-->
			<ion-nav-back-button></ion-nav-back-button>
		</ion-nav-bar>
		
		
		<!--导航框架之导航视图-->
		<ion-nav-view></ion-nav-view>
		
		
		
		
		<!--内联模板:home.html-->
		<script id="home.html" type="text/ng-template">
			<!-- 导航框架之模板视图 -->
			<ion-view view-title="Home">
				<!--模板视图内容-->
				<ion-content>
					<ion-list type="list-inset">
						<ion-item ui-sref="music" class="item-icon-right">
							Go to music page!
							<i class="icon ion-ios-arrow-right"></i>
						</ion-item>
					</ion-list>
				</ion-content>
			</ion-view>
		</script>
		
		
		
		<!--内联模板:music.html-->
		<script id="music.html" type="text/ng-template">
			<!-- ion-view 的title 属性值将显示在导航栏中 -->
			<ion-view view-title="Music">
				<!--模板视图内容-->
				<ion-content class="padding">
					<a class="button ion ion-home" ui-sref="home"> go home</a>
				</ion-content>
			</ion-view>
		</script>
		
		
	</body>
	<script type="text/javascript">
		var app = angular.module("myapp", ["ionic"]);
		app.config(function($stateProvider) {
			$stateProvider.state("home", {
				templateUrl: "home.html"
			}).state("music", {
				templateUrl: "music.html"
			});
		});
		app.controller("mycontroller", function($scope, $state) {
			$state.go("home");
		});
	</script>

</html>









2017-09-19 11:14:06 yiershan1314 阅读数 6501

Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)
Angular4记账webApp练手项目之三(在angular4项目中使用路由router)
Angular4记账webApp练手项目之四(在Angular4项目中用echarts绘制图表)
Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)
前台源码

前提

1、已经安装了node.js环境
2、已经安装了npm环境
windows可以通过cmd输入以下指令查看

node -v  // node版本
npm -v   // npm版本

安装angular-cli 脚手架

npm install -g @angular/cli

安装失败可以尝试下面方法,先卸载清楚缓存,再安装

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

官方文档 :https://github.com/angular/angular-cli

官方提供了一些指令
这里写图片描述

创建项目

创建一个名为ng-account的项目

ng new ng-account

进入项目

cd ng-account

运行项目

ng server --open

生成打包(发布),默认会在项目文件夹下生成一个名为dist的文件夹。

ng build

开发项目

用自己喜欢的开发工具打开项目文件夹。vs code、webStroem或者其他

这里写图片描述

和vue-cli构建的vue2项目很类似。我们主要修改src文件夹下的内容。其中我们新建的代码放在app中。其中spec.ts 文件是测试文件,可以删除。

新建菜单模块(menu),记账模块(accounting),统计模块(count),统计模块下面的子模块:年(count-year),月(count-month)

ng g component menu
ng g component accounting
ng g component count
ng g component count\count-year
ng g component count\count-month

每个组建默认都有四个文件,图中已经把测试文件删除了,剩下一看后缀就知道,.css里是放样式的,.html里是页面布局的,.ts里是写代码的。
这里写图片描述

用官方提供的指令创建,会将组件自动添加到app.module中,我们就可以直接使用了。
这里写图片描述

在app.component.html使用组件
这里写图片描述

这里写图片描述

angular-seed

阅读数 0