ngRoute插件

angular中可以使用插件,例如ngRoute插件就是用与路由控制。

首先要在模块中引入即可:

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);

然后我们进行供应商配置

m1.config([‘$routeProvider‘,function($routeProvider){

    $routeProvider
        .when(‘/aaa/:num‘,{
            template : ‘<p>首页的内容</p>{{name}}‘,
            controller : ‘Aaa‘
        })
        .when(‘/bbb‘,{
            template : ‘<p>学员的内容</p>{{name}}‘,
            controller : ‘Bbb‘
        })
        .when(‘/ccc‘,{
            template : ‘<p>课程的内容</p>{{name}}‘,
            controller : ‘Ccc‘
        })
        .otherwise({
            redirectTo : ‘/aaa‘
        });

}]);

如上,通过when方法来制定不同的hash值对应不同的视图,hash只后面还可以带上参数num,

如何改变hash值?

1.可以通过a链接的href属性

2.通过$location.path()方法来改变

m1.controller(‘Aaa‘,[‘$scope‘,‘$location‘,‘$routeParams‘,function($scope,$location,$routeParams){

    $scope.name = ‘hello‘;
    $scope.$location = $location;

    console.log( $routeParams );

}]);

还可以在run方法中监听路由事件。

m1.run([‘$rootScope‘,function($rootScope){

    $rootScope.$on(‘$routeChangeStart‘,function(event,current,pre){
        console.log(event);
        console.log(current);
        console.log(pre);
    });

}]);
时间: 2024-08-05 23:03:17

ngRoute插件的相关文章

angularjs之插件ngRoute和ngAnimate

使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src=&quo

angularjs 路由 ngRoute tab切换

<!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"></scrip

在angular中使用swiper插件轮播无效的原因

我在angular中使用swiper插件时总会出现轮播不运行. 做项目么,肯定会使用路由实现切换的效果,我在做项目时总喜欢先把内容渲染在主页面上,当所要实现的效果都实现时,然后再把数据拿出来放在子页面上,通俗的讲就是把他放在另一个页面上,通过路由去获取信息. 1.在用路由中实现时一定要在路由里加上控制器controller 1 app.config(function ($routeProvider) { 2 $routeProvider.when('/index', { 3 templateUr

使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

本文标签: WebScraper Chrome浏览器插件 网页数据的爬取 使用Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬虫中的登陆.验证码.异步加载等复杂问题. Web Scraper插件 Web Scraper 官网中的简介: Web Scraper Extension (Free!)Using our extension you can create a plan (sitemap) how a web site

eclipse插件之Findbugs、Checkstyle、PMD安装及使用

一.什么是Findbugs.checkstyle.PMD Findbugs.checkstyle和PMD都可以作为插件插入eclipse,当然也有单独的工具可以实现他们的功能,比如Findbugs Tool就可以不必插入eclipse就可以使用. 三者的功能如下表: 工具 目的 检查项 FindBugs 检查.class 基于Bug Patterns概念,查找javabytecode(.class文件)中的潜在bug 主要检查bytecode中的bug patterns,如NullPoint空指

eclipse安装java ee插件方法步骤

1.本人以前使用的MyEclipse进行Javaweb开发,但是后来由于myeclipse实在太臃肿,经常在运行的过程中不流畅 (可能电脑内存也不是太高吧)   !所以坚决换用eclipse,但是问题来了,下载的eclipse因为是标准版所以也不支持Javaweb开发,所以要来配置一下开发环境,安装Javaee开发插件   ,以下为安装步骤 1.1 在Eclipse中菜单help选项中选择install new software选项 1.2 在work with 栏中输入 http://down

Myeclipse10 安装Aptana插件

安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2.在java文件夹下新建文件夹pluginsNew,在里面新建aptana_update_024747文件夹(这个文件夹名根据自己下载的版本自己写),再在里面新建eclipse文件夹,解压出features与plugins文件夹,COPY到 D:\java\pluginsNew\aptana_upda

这是一款借助chrome 插件的微信机器人

1.chrome kit微信机器人简介(github:https://github.com/LinuxForYQH/chrome_kit) 借助chrome 插件 js注入来实现消息的发送 chrome devtool api的调用来监听https请求 打开微信登录界面,在扫码登录前必须先打开toolbar(F12 或者 鼠标右键检查),如上所说因为借助了chrome devtool api所以需要打开toolbar才能执行相关dev域的js. 2.相关开发原理介绍 https://develo

使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可