silence717 / angularjs1.x-webpack-seed Goto Github PK
View Code? Open in Web Editor NEW使用angular1.5 + es2015 + webpack 练习demo
使用angular1.5 + es2015 + webpack 练习demo
npm install --save angular-ui-router
备注: 以下所有示例代码来源于个人所写的练习.
地址为:https://github.com/silence717/angular-webpack-demo
import uiRouter from 'angular-ui-router';
angular.module('app',[uiRouter]);
function runBlock($rootScope, $state, $stateParams) {
'ngInject';
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
export function routerConfig($urlRouterProvider) {
'ngInject';
// 默认路由设置
$urlRouterProvider.otherwise('/home');
// 无视浏览器中 url末尾的"/"
// 设置时 url, 末尾不要添加 "/"
$urlRouterProvider.rule(($injector, $location) => {
const path = $location.path();
const hashTrailingSlash = path[path.length -1] === '/';
if (hashTrailingSlash) {
return path.slice(0, path.length -1);
}
});
}
angular
.module('app', [uiRouter])
.config(routerConfig)
.run(runBlock);
export const HomeRouter = {
state: 'home',
config: {
url: '/home',
views: {
'@': {
template: homeTpl,
controller: 'HomeController',
controllerAs: 'vm'
}
},
title: '好玩的app'
}
};
import {HomeRouter} from './Routers';
function config($stateProvider) {
'ngInject';
$stateProvider.state(HomeRouter.state, HomeRouter.config);
}
export default angular
.module('app.home', [])
.config(config)
.name;
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">首页</a></li>
<li ui-sref-active="active"><a ui-sref="album">相册</a></li>
<li ui-sref-active="active"><a ui-sref="user.baseInfo">个人中心</a></li>
</ul>
<div ui-view=""></div>
ui-view使用有三种,分别为:
<ui-view></ui-view>
<ANY ui-view ></ANY>
<ANY class="ui-view"></ANY>
具体里面的参数不做介绍,自己查阅官方文档
上面的html代码会被compile为:
<ul class="nav navbar-nav">
<li ui-sref-active="active" ui-sref-active-eq="" class="active"><a ui-sref="home" href="#/home">首页</a></li>
<li ui-sref-active="active" class=""><a ui-sref="album" href="#/album">相册</a></li>
<li ui-sref-active="active" class=""><a ui-sref="user.baseInfo" href="#/user/baseInfo">个人中心</a></li>
</ul>
<a href="javascript:;" ng-click="vm.getConfig();">获取state配置</a>
let config = this.state.get('user');
console.log(config);
// => Object {url: "/user", views: Object, title: "个人中心", name: "user"}...
<a href="javascript:;" ng-click="vm.goUserCenter();">这是一个跳转链接...</a>
// 不带参数跳转
this.state.go('user.baseInfo');
// 带参数跳转
this.state.go('album.detail', {id: 1});
console.log(this.state.href('album.detail', {id: 0}));
// => #/album/0
console.log(this.state.includes('album'));
// => false
console.log(this.state.is('home')); //=> true
function stateChangeStart($rootScope) {
$rootScope.$on('$stateChangeStart',
(event, toState, toParams, fromState, fromParams) => {
// event.preventDefault();
console.log('开始改变=====');
console.log(toState);
console.log(toParams);
console.log(fromState);
console.log(fromParams);
// 开始改变=====
// app.js:48Object {url: "/home", views: Object, title: "好玩的app", name: "home"}
// app.js:49Object {}
// app.js:50Object {name: "", url: "^", views: null, abstract: true}
// app.js:51Object {}
// client.js:55 [HMR] connected
});
}
// somewhere, assume lazy.state has not been defined
$state.go("lazy.state", {a:1, b:2}, {inherit:false});
// somewhere else
$scope.$on('$stateNotFound',
function(event, unfoundState, fromState, fromParams) {
console.log(unfoundState.to); // "lazy.state"
console.log(unfoundState.toParams); // {a:1, b:2}
console.log(unfoundState.options); // {inherit:false} + default options
})
onEnter: function() {
console.log('enter user.footprint state');
}
onExit: function() {
// 用于初始化一些数据什么的,清空表单...
console.log('exit user.footprint state');
}
<div ui-view="content"></div>
<div ng-show="vm.isShowThumb" class="module-content" ui-view="thumbList"></div>
<div ng-show="vm.isShowDetail" ui-view="detailList"></div>
export const UserFootprintRouter = {
state: 'user.footprint',
config: {
url: '/footprint',
views: {
'content@user': {
template: footPrintTpl,
controller: 'FootprintController',
controllerAs: 'vm'
},
'[email protected]': {
template: thumbListTpl
},
'[email protected]': {
template: detailListTpl
}
},
title: '我的足迹'
}
};
个人理解就是: viewname@statename去设置template
先看代码:
export const AlbumDetailRouter = {
state: 'album.detail',
config: {
url: '/:id',
views: {
'@': {
template: albumDetailTpl,
controller: 'PhotoController',
controllerAs: 'vm'
}
},
title: '单张照片show'
}
};
问: 我们经常会需要用到路由去传参,例如编辑一条信息,获取单个信息,应该如何去做呢?
答: angular-ui-router提供了一个$stateParams的service,可直接获取.在controller中的使用示例
export default class PhotoController {
constructor(photoResource, $stateParams) {
let vm = this;
photoResource.success(data => {
vm.detail = data[$stateParams.id];
})
}
}
有人肯定会疑问,$stateParams从何而来,在上面我们给angular.module中已经将其初始化,挂在到$rootScope.
app.config(function($urlRouterProvider){
$urlRouterProvider.when('', '/index');
});
app.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/home');
});
angular.js:14700 Error: transition superseded
at $StateProvider.$get (angular-ui-router.js:2903)
at Object.invoke (angular.js:5040)
at angular.js:4832
at getService (angular.js:4981)
at injectionArgs (angular.js:5006)
at Object.invoke (angular.js:5032)
at angular.js:4842
at forEach (angular.js:410)
at createInjector (angular.js:4842)
at doBootstrap (angular.js:1949) "Possibly unhandled rejection: {}"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.