angular webapp
2017-09-15 19:07:20 xyphf 阅读数 340

将WepAPP的模块划分为比如说:模块A、模块B、模块C
一般根据Webapp下面的菜单来划分模块进行开发,首先我们进入第一个模块的开发:

我们先写一个html页面,index.html,因为是单页应用,所以是第一个页面也是最后一个页面。
步骤:
① 在html页面里面引入angularJS的脚本

②创建第一个模块,在script文件下建一个app.js文件
(叫app.js的好处是在构建的时候,是按升序进行排列的,
app.js这个文件就会排在前面,而且是必须排在前面)

③index.js文件是我们写的所有js文件用gulp的压缩后文件,所有只要导入index.js文件就导入了所有我们写的js文件

④在html标签上添加ng-app指令,它的值就是我们的模块名”app”,
ng-app=”app”这个指令的意思就是生命这个页面由app这个模块来启动

index.js

<!DOCTYPE html>
<!-- ④在html标签上添加ng-app="app"指令,启动app模块 -->
<html lang="en" ng-app="app"> 
<head>
  <meta charset="UTF-8">
  <title>webapp</title>
</head>
<body>
   // ① 引入angularJS的脚本
  <script src="vendor/angular/angular.min.js" charset="utf-8"></script>
  //引入index.js 这个是所有js打包后的文件
  <!-- ③导入index.js文件 -->
  <script src="js/index.js" charset="utf-8"></script>
</body>
</html>

app.js

'use strict';  // 启用严格模式

//angular对象有个module函数,我们可以用它来创建一个模块叫做app,创建模块的时候要声明模块的依赖,现在没有依赖,所以写一个空数组 []
angular.module('app',[]);

//这样就创建了一个模块,但是创建的这个模块,并不能使用,因为我们还没有启动它,启动这个模块的方法就是在index.html文件的html标签上加一个ng-app="app"指令 ,如:④

这样一个Webapp的基础结构就搭建完成了,但是仅仅是一个毛坯房,我们还需要不断的完善

angular webapp 相关内容

2017-09-15 22:34:09 xyphf 阅读数 508

现在来做一件开发WebApp中非常重要的一步,就是开发路由。

我们知道路由就是用来管理和控制页面和业务逻辑的跳转及加载的。
①在webapp目录打开控制台,安装一下ui-router

bower install --save ui-router

②在index.html中引入ui-router,ui-router必须在angularJS之后引入
index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>webapp</title>
</head>
<body>
  <div ui-view></div>
  <script src="vendor/angular/angular.min.js" charset="utf-8"></script>
  <!-- ②引入angular-ui-router -->
  <script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
</body>
</html>

③在app的模块中声明依赖的ui-router,
app.js

'use strict';
//添加ui.router依赖
angular.module('app', ['ui.router']);

④在引入模块之后,我还需要对其进行配置。
在script目录建一个config文件,我们这里配置的是路由模块,所以我们建一个router.js
router.js

'use strict';

//对上面的app模块进行配置,因为我们的主模块叫做app,在module函数第一个参数传入'app',表示引入这个模块
/*
* 然后引用一个专门的配置函数叫做config,一种是直接传入函数称为隐式声明的方式,还有一种是显式声明的方式
* 隐式声明方式 【隐式声明的方式压缩会报错,所以不推荐使用】
* angular.module('app'),config(function($stateProvider, $urlRouterProvider){})
*/

/*
 * 下面我们使用显式声明的方式来写config配置函数
 * 我们对两个Provider进行配置,一个是$stateProvider,另一个是$urlRouterProvider,
 * 这里的Provider就是对前面的服务进行配置的一个入口,在声明两个Provider之后再传入一个函数,
 * 这个函数形参名字可以随便取,但是我们任然习惯性取成和声明一样使用$stateProvider$urlRouterProvider,不过后来压缩还是会压缩成其他的名字。
 * 
 * 第一个$stateProvider就是用来配置路由的,下面有个state函数,这个state函数有两个参数,
 * 第一个参数是我们的主页面叫做'main',这个就是主页面id,当我们使用服务来跳转的时候就会用到这个id,唯一标识一个路径。第二个参数就是对象,这个对象中常用参数有三个,
 * 第1个是url,就是hash值;这个也是可以传参的,如url:'/main':id,
 * 第2个是页面templateUrl,templateUrl长放在view目录下面,
 * 第3有了页面还是不够的,因为是动态的,还要有交互,这个页面的逻辑放在controller里面,
 * controller的名称通常是页面的名称再+Ctrl,如下面的mainCtrl
 * 如果是多个路由的话,也是这种链式调用的写法。
*/
angular.module('app').config(['$stateProvider', '$urlRouterProvider', 
function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'view/main.html',
    controller: 'mainCtrl'
  });
  //第二个urlRouterProvider下面有个otherwise函数,如果前面配置的所有路由都没有匹配上,otherwise函数就会生效,他就会默认转发到我们设置的'main'这个路由下面。
  $urlRouterProvider.otherwise('main');
}])

⑤这样我们还需要声明一个指令将页面召唤出来,指令常见的方式有两种:
一种是写成DOM的属性, < div ui-view>< /div>;
第二种是直接手写。指令是召唤url DOM的一些元素和对应的一些逻辑,

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>webapp</title>
</head>
<body>
  <!-- 这里表示当一个页面进行加载的时候,它是直接插入到带有ui-view这个属性的div里面 -->
  <div ui-view>

  </div>
  <script src="vendor/angular/angular.min.js" charset="utf-8"></script>
  <script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
  <script src="js/index.js" charset="utf-8"></script>
</body>
</html>

为此我制作了一张图便于理解和记忆
angularJS路由解析
⑤我们在main.html页面里面写一个’Hello World’,我们在首页可以看到这个’Hello World’,这就说这个路由配置成功了!


上面我们对ui-router模块做了简单的介绍,不过比较基础,
实际开发中还会遇到一些问题,现在我们对路由模块进行一些扩展的介绍

在介绍一个重要指令和服务: ui-sref、$state
url传参

传递完参数如何进行获取,页面之间如何跳转呢?
这个时候有两种跳转方式:

第一种就是使用指令ui-sref跳转;当配有这个指令的元素被我们点击之后,就会跳转到对应的路由页面,然后跳转的时候可以传入参数。
如:我们点击a标签想跳转到main页面的时候,可以这样写:
如果main还有参数就以函数的形式传入一个对象进去,对象属性就和我们配置的参数名对应,其值就是我们要传入的值;

<a ui-sref="main({ id: 1234})" ng-bind="contact.name"></a>

第二种以JS脚本的方式跳转,就需要引入一个服务。服务可以理解为一段共用的代码或者是公用的函数。
它会提供一个叫做$state.go的函数,
它的第一个参数是我们之前定义的路由id,比如之前我们定义的是’main’,
然后后面对应的就是参数,它是以js对象的形式进行传递,
最后一个参数,location:’replace’表示跳转的时候消除当前的路径;
回跳的时候,当前这个页面就会被消除,就不会跳回到当前页面;
跳转

获取我们传入的参数也有两种方式;

//第一种:使用$state属性, 
$state.params.id
//$state后面有所有的定义参数

//第二种:直接使用$stateParams服务,它的属性就是我们定义的参数;
$stateParams.id

基本上ui.router的配置方式和控制页面跳转以及参数的传递,这三个重要的概念已经讲解完了。

angular webapp 相关内容

2017-09-11 07:43:15 xyphf 阅读数 1814

说到单页单页应用,从字面上来理解,就是单个页面的应用,这样理解是没有错的。
定义:页面跳转无刷新

页面跳转不刷新实际上是通过路由来控制页面的跳转,这个路由不是服务器端控制的路由,是JS控制的路由,这种路由的控制方法是URL的哈希值。

单页应用的优点是:
第一:页面切换非常流畅,它不在是将整改页面刷新重新渲染,而是对某个DOM元素进行替换,达到了页面切换的效果。
第二:完全的前后端分离,因为路由、模板这些都放在浏览器端来控制,不在依赖后端,和后端的交互只有数据。


那么下面我们来介绍一下用AngularJS开发单页应用WebApp的开发流程

WebApp的开发流程

前端构建工具的使用:

路由管理模块的配置和使用:
内置指令的使用方法;
自定义指令;
过滤器;
promise和ajax内置服务;
第三方模块编写自定义服务;
表单校验;
AngularJS装饰器修改ajax服务(使前端也能响应post请求,从而脱离后端独立开发调试)

所需要具备的知识:
基础知识:JS、HTML、CSS
前端知识:AJAX、Promise
课程知识:Less、node.js

AngularJS & 第三方模块的概念和使用方法
由易到难,由次要到重要
AngularJS指令

简介

使用AngularJS和构建工具来搭建框架、开发项目

angular webapp 相关内容

2017-09-23 18:49:53 xyphf 阅读数 512

HTML模板

<div class="head ta-c p-r">         //点击返回
    <span class="p-a c-w back-btn" ng-click="back()">&lt;</span>
    <span class="c-w" ng-bind="text">职位详情</span>
</div>

指令

'use strict'
angular.module('app').directive('appHeadBar',[function() {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: 'view/template/headBar.html',
        scope: {
            text: '@'
        },link: function ($scope) {
            $scope.back = function() {
                window.history.back();  // 返回
            }
        }
    };
}]);

angular webapp 相关内容

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

今天我们主要介绍一下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对象。

angular webapp 相关内容

没有更多推荐了,返回首页