AngularJS 实战开发教程之聊天室 一
2018-02-09 21:59
519 查看
最近在学习AngularJs,学习一门技术最好的方式就是实践。出于这样的目的，我准备从实现一个聊天室为切入点完成angularJs的学习。本教程会持续更新，逐步的带领大家用angularJs完成一个网页版的聊天室。我们需要搭起一个框架，在本项目中我们会使用到ui-router这个组件承担起路由的工作。 目前项目的文件结构（随着项目的进行还会不断的扩充）
index.html 项目的入口文件，tpls 文件夹用来存放html模板文件, js 文件夹存放 js文件。 index.html 代码<!DOCTYPE html>
<html lang="en" ng-app="pchat">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入angularjs-->
<!--<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>-->
<script src="js/angular.min.js"></script>
<!-- 引入ui-router -->
<script src="js/angular-ui-router.js"></script>
<!-- 引入app.js-->
<script src="js/app.js"></script>
</head>
<body>
<div ui-view="main"></div>
</body>
</html>在index.html 里定义了模块pchat，引入了angularJs的核心js文件，ui-router组件库，和 app.js（app.js 是项目本身的代码 下面会介绍到）。 body 标签里面 包含了一个 div 用来显示 名称为 main 的 view 。 app.js 代码var pchat = angular.module('pchat', ["ui.router"]);
pchat.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("login", {
url: "/login",
views: {
"main": {
templateUrl: 'tpls/login.html',
}
}
});
});
tpls/login.html （模板文件）<div> login page </div>app.js 里 通过 angular.module 的方法实例化了pchat模块（ 方法的第一个参数是模块的名称和之前的index.html里的模块的名称对应，第二个参数是模块依赖于其他模块的列表，这里pchat模块依赖ui-router模块）， 并且通过依赖注入的方式注入了ui-router。 pchat模块通过$stateProvider （$stateProvider 是由 ui-router 组件提供的）配置了一个路由地址为/login 其状态为login ，login 状态定义了一个名称为 main 的 view （和之前index.html名称对应上），它的模板文件tpls/login.html。我们运行一下代码 看看是什么效果
可以看到 路由为 /login的链接 输出了 login page , ui-router的路由就是这样使用。 接着我们对app.js做一些改动加入master和maser.home的状态路由规则。（master和master.home）为父子路由。 app.js 代码var pchat = angular.module('pchat', ["ui.router"]);
pchat.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("login", {
url: "/login",
views: {
"main": {
templateUrl: 'tpls/login.html',
}
}
}).state("master", {
url:"/master",
views: {
"main": {
templateUrl: 'tpls/master.html'
}
}
}).state("master.home", {
url: "/home",
views: {
"content": {
templateUrl: 'tpls/home.html'
}
},
});
}); tpls/master.html<div>
master
<div ui-view="content"></div>
</div>
tpls/home.html<div>home</div>
访问以下/master
可以看到 /master 和之前一样被路由到 tpls/master.html 打印出master。 名称 content 为 view 的 视图并没有显示出来 。 在来访问以下 /master/home（ master.home 是继承 与 master）
由于master.home 继承与master ，先输出了master状态下的 tpls/master.html 模板文件，之后输出了 tpls/home.html（对应 名称为 content的 view ）模板文件。 最后我们在app.js配置中加上一个默认的路由$urlRouterProvider.otherwise('/master/home');这样我们这个项目的登录页面和主页的框架就搭建完成，之后只需要将模板里面的文字替换成html页面就可以了。持续更新中……………..
原文地址: Witty Blog
index.html 项目的入口文件，tpls 文件夹用来存放html模板文件, js 文件夹存放 js文件。 index.html 代码<!DOCTYPE html>
<html lang="en" ng-app="pchat">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入angularjs-->
<!--<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>-->
<script src="js/angular.min.js"></script>
<!-- 引入ui-router -->
<script src="js/angular-ui-router.js"></script>
<!-- 引入app.js-->
<script src="js/app.js"></script>
</head>
<body>
<div ui-view="main"></div>
</body>
</html>在index.html 里定义了模块pchat，引入了angularJs的核心js文件，ui-router组件库，和 app.js（app.js 是项目本身的代码 下面会介绍到）。 body 标签里面 包含了一个 div 用来显示 名称为 main 的 view 。 app.js 代码var pchat = angular.module('pchat', ["ui.router"]);
pchat.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("login", {
url: "/login",
views: {
"main": {
templateUrl: 'tpls/login.html',
}
}
});
});
tpls/login.html （模板文件）<div> login page </div>app.js 里 通过 angular.module 的方法实例化了pchat模块（ 方法的第一个参数是模块的名称和之前的index.html里的模块的名称对应，第二个参数是模块依赖于其他模块的列表，这里pchat模块依赖ui-router模块）， 并且通过依赖注入的方式注入了ui-router。 pchat模块通过$stateProvider （$stateProvider 是由 ui-router 组件提供的）配置了一个路由地址为/login 其状态为login ，login 状态定义了一个名称为 main 的 view （和之前index.html名称对应上），它的模板文件tpls/login.html。我们运行一下代码 看看是什么效果
可以看到 路由为 /login的链接 输出了 login page , ui-router的路由就是这样使用。 接着我们对app.js做一些改动加入master和maser.home的状态路由规则。（master和master.home）为父子路由。 app.js 代码var pchat = angular.module('pchat', ["ui.router"]);
pchat.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("login", {
url: "/login",
views: {
"main": {
templateUrl: 'tpls/login.html',
}
}
}).state("master", {
url:"/master",
views: {
"main": {
templateUrl: 'tpls/master.html'
}
}
}).state("master.home", {
url: "/home",
views: {
"content": {
templateUrl: 'tpls/home.html'
}
},
});
}); tpls/master.html<div>
master
<div ui-view="content"></div>
</div>
tpls/home.html<div>home</div>
访问以下/master
可以看到 /master 和之前一样被路由到 tpls/master.html 打印出master。 名称 content 为 view 的 视图并没有显示出来 。 在来访问以下 /master/home（ master.home 是继承 与 master）
由于master.home 继承与master ，先输出了master状态下的 tpls/master.html 模板文件，之后输出了 tpls/home.html（对应 名称为 content的 view ）模板文件。 最后我们在app.js配置中加上一个默认的路由$urlRouterProvider.otherwise('/master/home');这样我们这个项目的登录页面和主页的框架就搭建完成，之后只需要将模板里面的文字替换成html页面就可以了。持续更新中……………..
原文地址: Witty Blog
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS 实战开发教程之聊天室 一
- WebApp开发实战视频教程
- 嵌入式ARM系统实战开发教程下载
- 2016年最新云计算视频教程hadoop大数据实战开发
- 微信公众平台开发入门到实战开发视频教程（Java+PHP)
- 图书《HTML5 App商业开发实战教程》读后小感（一）
- php扩展开发实战教程(1)
- Swift游戏开发实战教程（大学霸内部资料）
- 以太坊开发 DApp 实战教程——用区块链、星际文件系统（IPFS）、Node.js 和 MongoDB 来构建电商平台
- mybatis实战教程(mybatis in action)之一：开发环境搭建
- 微信公众平台整合开发实战教程 微信开发教程
- 基于RED5&Flex流媒体应用实战开发教程下载
- Android开发教程 --- 布局实战
- Unity游戏开发实战视频教程
- webpack4 系列教程(十六)：开发模式和生产模式·实战
- Sencha Touch 实战开发培训 视频教程 第二期 第三节
- C++应用实战项目开发视频教程
- Django 学习小组：博客开发实战第三周教程——文章列表分页和代码语法高亮
- Jasperreports6.3.1+Jaspersoft studio6.3.1进行报表开发实战教程(七)