lihaiming
lihaiming

AngularJS ui-router (嵌套路由)

阅读目录

  • 介绍
  • 背景
  • 实战

AngularJS ui-router (嵌套路由)

介绍

AngularJS 嵌套路由：这是我针对同一个主题（ui-router）的第二篇文章. 如果你对第一篇文章感兴趣的话，可以访问 这里. 好了，让我们继续吧，来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性. 我们将在示例中看到ui-router中存在的所有类型.

回到顶部

背景

引述我之前那篇文章开头给出的使用ui-router框架实现的简单路由, 基于我们的业务需求，需要有不同类型的导航, 一般像那种从一个页面到另外一个页面的导航非常的普通。但请想象一下在某些情况下，你需要在一个主页中有tab页或者菜单可以点击打开相应的页面.

好吧，让我们来看看一个典型的导航..

AngularJS ui-router (嵌套路由)_第1张图片

注意，这个导航我们已经在之前的文章中见过。针对现在的主题我们将看到该导航嵌套进视图中的形式.

AngularJS ui-router (嵌套路由)_第2张图片

根据上的界面设计，我们计划该页面能从一个页面导航到另外一个页面, 当点击page-1时，我们将在下面显示page-1的内容，点击其它导航菜单也会有类似的效果. 我们希望这能够用一种很直接的方式被处理. 让我们开始写代码吧.

回到顶部

实战

针对该需求我们使用AngularJS框架来创建简单的html和JavaScript页面. 我们将创建3个HTML页面和一个JavaScript脚本文件。 

一开始我们创建一个空的web应用程序，并加入三个HTML页面。如下所示. 这些页面都是片段视图, 它们会在导航过程中展示。我们还要为了能展示应用程序的Tab，创建另外一个叫做PageTab.html的页面.

因此我们需要创建以下文件：

1. Page1.html

2. Page2.html

3. Page3.html

4. PageTab.html

注意：我们使用的是AngularJS 1.2，当我写这篇文章的时候，Angular 1.3已经发布了。

Page1.html

创建如下的html页面：

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

Page2.html

创建如下的html页面：

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 2 content goes here...</ h1 >
      </ div >
</ div >

Page3.html

创建如下的html页面：

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 3 content goes here...</ h1 >
      </ div >
</ div >

创建如下的html页面：

PageTab.html

创建如下的html页面：

?
1
2
3
4
5
6
7
< div >
      < div >
          < span  style = "width:100px" >Page-1</ span >
          < span  style = "width:100px" >Page-2</ span >
          < span  style = "width:100px" >Page-3</ span >
      </ div >
</ div >

这将会使页面文本处于侧边，哎呀，我忘了添加当用户将鼠标悬停在文本上的时候的超链接了。让我们这样做：

?
1
2
3
4
5
6
7
< div >
      < div >
          < span  style = "width:100px" >< a  href = "" >Page-1</ a ></ span >
          < span  style = "width:100px" >< a  href = "" >Page-2</ a ></ span >
          < span  style = "width:100px" >< a  href = "" >Page-3</ a ></ span >
      </ div >
</ div >

我们没有指向任何超链接，只是为了把链接放在href中，实际上这是一种获取url的解决方法。

注意，到目前为止，我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段，我们需要一个占位或者说父页面来装下这些东西. 让我们把这个页面叫做 Main.html.

现在我们就来创建它.

Main.html

用如下内容创建这个html页面.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < script  src = "Scripts/angular.js" ></ script >
     < script  src = "Scripts/angular-ui-router.js" ></ script >
     < script  src = "App.js" ></ script >
 
</ head >
< body  data-ng-app = "myApp" >
     < h1 >AngularJS Home Page (Ui-router Demonstration)</ h1 >
     < div  data-ui-view = "" ></ div >
</ body >
< html >

我们需要在主页中做一些事情, (i) 我们需要引入AngularJS框架 (ii) 我们需要引入ui-router框架. (iii) 引入AngularJS文件 App.js (之后我会谈到这个) (iv) 第四件事情就是让主页内容展示出来，然后显示出它里面的页面.

现在，让我们看一下App.JS文件的内容，我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在Main.html中显示PageTab.html的内容。代码如下：

App.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var  myApp = angular.module( "myApp" , [&apos;ui.router&apos;]);
 
myApp.config( function  ($stateProvider, $urlRouterProvider) {
 
      $urlRouterProvider.when( "" ,  "/PageTab" );
 
      $stateProvider
         .state( "PageTab" , {
             url:  "/PageTab" ,
             templateUrl:  "PageTab.html"
         })
         .state( "PageTab.Page1" , {
             url: "/Page1" ,
             templateUrl:  "Page-1.html"
         })
         .state( "PageTab.Page2" , {
             url: "/Page2" ,
             templateUrl:  "Page-2.html"
         })
         .state( "PageTab.Page3" , {
             url: "/Page3" ,
             templateUrl:  "Page3.html"
         });
});

我们一步步地来解释这做了什么。

Line-1: 第一行，声明AngularJS模块, 并把ui-router传入AngularJS主模块，所有的结合起来我们就得到了Angular模块。

?
1
var  myApp = angular.module( "myApp" , [&apos;ui.router&apos;]);

这里叫做App模块，这将告诉HTML页面这是一个AngularJS作用的页面，它的内容由AngularJS引擎来解释。

代码行-2:这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了.

?
1
myApp.config( function  ($stateProvider, $urlRouterProvider) {

代码行-3: 好，那这一行做什么的呢，如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 PageTab.html, 这个页面就是状态名称被声明的地方. 只要理解了这个，那它就像switch case语句中的default选项.

?
1
$urlRouterProvider.when( "" ,  "/PageTab" );

语句块-1: 这一行定义了会在main.html页面第一个显示出来的状态，作为页面被加载好以后第一个被使用的路由.

?
1
2
3
4
5
$stateProvider
         .state( "PageTab" , {
             url:  "/PageTab" ,
             templateUrl:  "PageTab.html"
         })

这就向母版页的子页面，应用程序会首先加载这个main.html页面。

语句块-2: 现在，就由这一行来定义页面, 但是等一等，这里有点不同，我们之前为上面的状态名称加上了前缀，并且使用点“.“号进行了分隔. 这里很关键，它会告诉路由引擎我们在这里定义的是子页面/嵌入页面/嵌入(sub page / nested page / nested)状态的page/route.

?
1
2
3
4
.state( "PageTab.Page1" , {
             url: "/Page1" ,
             templateUrl:  "Page-1.html"
         })

它将会在 "PageTab.html" 页面里面显示出来，那么它是什么意思呢. 想象一下当我们想要在母版页中管理所有的页面时，我们就会想要一个叫做”ui-view“的占位标记, 因此我们现在把PageTab.html叫做一个母版页，因为它会把我们需要在PageTab.html中用”ui-view“ 声明好的其它页面都管理起来. 现在让我们来修改一下它.

PageTab.html

?
1
2
3
4
5
6
7
8
9
10
<div>
      <div>
          <span style= "width:100px" ><a href= "" >Page- 1 </a></span>
          <span style= "width:100px" ><a href= "" >Page- 2 </a></span>
          <span style= "width:100px" ><a href= "" >Page- 3 </a></span>
      </div>
      <div>
           <div ui-view= "" />
      </div>
</div>

好了，再来下面一行..

?
1
2
3
<div>
     <div ui-view= "" />
</div>

也就是说 PageTab.html 将对装下所有的子页面.

现在一切就绪了。OK，可是现在谁来告诉程序应该显示哪个页面呢. 这就是我们要在路由引擎里面配置的东西，如下所示.

?
1
2
3
4
.state( "PageTab.Page2" , {
             url: "/Page2" ,
             templateUrl:  "Page2.html"
         })

Page2.html 将会在被叫做PageTab的状态中展示，它就是 PageTab.html.

Ok, 但是我们还落下啥事没做，这事就是当我们在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候需要页面在占位标记那里显示出来，是不 ?

还真是把那一块给忘啦，我们还没有为路由和这种逻辑建立起联系, 想象一下如果那是href的话，就意味着我们可以指定将会锚向页面里面的ID名称, 如果它是简单的html本地引用就是这样，但我们则需要按照需求显示不同的页面.

关键的地方在这里.  (ui-sref) 我们需要再一次修改 PageTab.html，如下所示.,

?
1
2
3
4
5
6
7
8
9
10
< div >
      < div >
          < span  style = "width:100px"  ui-sref = ".Page1" >< a  href = "" >Page-1</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page2" >< a  href = "" >Page-2</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page3" >< a  href = "" >Page-3</ a ></ span >
      </ div >
      < div >
           < div  ui-view = "" />
      </ div >
</ div >

注意，只是上面高亮的部分发生了改变 , 这里我们只是简单的将App.js中定义的状态同tab中定义的对应文本进行了关联. 当我们使用点符号对它进行了声明，程序就会认为页面时ui-view中的子页面或者说嵌入页面，它们就是路由配置中需要被展示的页面.

现在，我们要看看目前为止我们讨论过的那些页面的内容了.

Main.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < script  src = "Scripts/angular.js" ></ script >
     < script  src = "Scripts/angular-ui-router.js" ></ script >
     < script  src = "App.js" ></ script >
 
</ head >
< body  data-ng-app = "myApp" >
     < h1 >AngularJS Home Page (Ui-router Demonstration)</ h1 >
     < div  data-ui-view = "" ></ div >
</ body >
< html >

PageTab.html

?
1
2
3
4
5
6
7
8
9
10
< div >
      < div >
          < span  style = "width:100px"  ui-sref = ".Page1" >< a  href = "" >Page-1</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page2" >< a  href = "" >Page-2</ a ></ span >
          < span  style = "width:100px"  ui-sref = ".Page3" >< a  href = "" >Page-3</ a ></ span >
      </ div >
      < div >
           < div  ui-view = "" />
      </ div >
</ div >

Page1.html

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

Page2.html

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

Page2.html

?
1
2
3
4
5
< div >
      < div >
          < h1 >Page 1 content goes here...</ h1 >
      </ div >
</ div >

App.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var  myApp = angular.module( "myApp" , [&apos;ui.router&apos;]);
 
myApp.config( function  ($stateProvider, $urlRouterProvider) {
 
      $urlRouterProvider.when( "" ,  "/PageTab" );
 
      $stateProvider
         .state( "PageTab" , {
             url:  "/PageTab" ,
             templateUrl:  "PageTab.html"
         })
         .state( "PageTab.Page1" , {
             url: "/Page1" ,
             templateUrl:  "Page1.html"
         })
         .state( "PageTab.Page2" , {
             url: "/Page2" ,
             templateUrl:  "Page2.html"
         })
         .state( "PageTab.Page3" , {
             url: "/Page3" ,
             templateUrl:  "Page3.html"
         });
});

一切OK，现在让我们把这个应用程序运行起来吧.

本文地址：http://www.oschina.net/translate/angularjs-ui-router-nested-routes

原文地址：http://www.codeproject.com/Articles/842880/AngularJS-ui-router-nested-routes

 

本文来源于：http://www.open-open.com/lib/view/open1416878937309.html

你可能感兴趣的:(AngularJS,ui-router)

  • 如何从Angularjs 升级到 Angular（译文） 快乐2020
    原文:UpgradingfromAngularJStoAngularAuthor:AngularJS官方译者：philoenglish.com团队关键字：AngularjsAngularAngular1.xAngular2.xmigration迁移，升级这里的Angular是指Angular2.x,而AngularJS是指AngularJS1.x版本。Angular(通常是指"Angular2+"
  • 【面试题系列Vue06】Vue 单页应用与多页应用的区别 周三有雨 vue面试题vue.js前端javascript
    单页应用单页应用这个概念，是随着前几年AngularJS、React、Ember等这些框架的出现而出现的。第一节内容里，我们在页面渲染中讲了页面的局部刷新，而单页应用则是使用了页面的局部刷新的能力，在切换页面的时候刷新页面内容，从而获取更好的体验。SPA与MPA单页应用（SinglePageWebApplication，SPA）和多页应用（MultiPageApplication，MPA）的区别可
  • js、ts、argular、nodejs学习心得 海棠如醉 web技术web
    工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构AngularJS诞生于2009年，由MiskoHevery等人创建，是一款构建用户界面的前端框架，后为Google所收购。[3]Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。AngularJS是用JavaScript编写，而Angul
  • 标题：重构传统电商：Moa - 融合Angular与Magento的新一代框架 伍辰惟
    标题：重构传统电商：Moa-融合Angular与Magento的新一代框架1、项目介绍Moa是一款创新的开源项目，它将传统的Magento商店带入了新时代。这个框架采用AngularJS前端和Laravel后端API，旨在解决Magento在单元测试、配置优先原则、Prototype.js使用以及未经过测试的第三方模块等方面的问题。Moa的设计目标是提高性能、可维护性和用户体验，为电子商务提供更现
  • 基于AngularJS的企业软件前端架构 weixin_33980459 前端javascript后端ViewUI
    2019独角兽企业重金招聘Python工程师标准>>>这篇是我参加QCon北京2014的演讲内容：提纲：企业应用在软件行业中占有很大的比重，而这类软件多数现在也都采用B/S的模式开发，在这个日新月异的时代，它们的前端开发技术找到了什么改进点呢？B/S企业软件前端开发模式大体上与桌面软件类似，都是偏重量级的，在前端可能会有较多的业务逻辑，这些业务逻辑如何被合理模块化，与界面分离，以便测试，成为这个领
  • 茂名华为云代理商：angularjs后台管理系统网站 aliyuncloud 华为云国际站代理商华为云代理商华为云国际站华为云angular.js前端运维云计算服务器javascript
    茂名华为云代理商：angularjs后台管理系统网站简介：飞机@luotuoemo本文由（华为云国际站代理商：【金推云】www.jintui.cn）撰写茂名华为云代理商：angularjs后台管理系统网站华为云代理商的介绍作为茂名地区的华为云代理商，我们致力于为客户提供最优质的云服务和解决方案。借助华为云强大的技术实力和丰富的行业经验，我们能够为客户量身定制各种云计算服务，满足其不同的需求。Ang
  • css修改图标字体大小,css-更改AngularJS材质图标的图标大小 莫博之 css修改图标字体大小
    css-更改AngularJS材质图标的图标大小我已经引用然后声明了一个图标face但是，如何更改图标大小？在官方网站[https://design.google.com/icons/]上，我看到他们使用诸如class="md-icondp48"280之类的类，但在我的情况下不起作用。9个解决方案72votes通过阅读github中的材料设计，我发现了这些有用的东西可能会对您有所帮助。/*Rule
  • 前端框架 air_b10f
    JavaScript在2017年被IBM评为最值得学习的编程语言之一，自然而然它的流行度快速上升，并一直持续。这也促使了一个活跃的生态系统的生成以及与之相关的技术和框架的发展。如今诞生了非常多的框架和库，如果对每一个框架没有一个大致的了解，恐怕很难抉择。如果你正在尝试选择一个合适的javascript框架，那么下面这几个框架你绝对不容错过：1.AngularJSAngularJS是一个有Googl
  • Web前端开发的框架可以应用到哪些地方 一只有头发的程序猿 工作学习web前端JavaScript编程程序员前端开发
    随着时间的推移，网页设计越来越具有创新性。web前端开发将成为2020年技术领域最热门的学科之一。以前，前端空间的开发人员只要了解一些HTML，CSS，也许还有jQuery来创建交互式网站，就足够了。但是今天，他们面临着广泛且不断变化的开发技能生态系统；最近几年，我们使用JavaScript为主要的Web应用程序提供了强大的新库和框架，例如ReactJS，VueJS和angularJS。这3个可以
  • （二）spring cloud微服务分布式云架构 - 整合企业架构的技术点 fumi106
    springcloud本身提供的组件就很多，但我们需要按照企业的业务模式来定制企业所需要的通用架构，那我们现在需要考虑使用哪些技术呢？下面我针对于springcloud微服务分布式云架构做了以下技术总结，希望可以帮助到大家：View：H5、Vue.js、SpringTag、React、angularJsSpringBoot/SpringCloud：Zuul、Ribbon、Feign、Turbine
  • 解决angularjs html 不转义问题 彬彬彬boboc
    方法1.引用angular-sanitize.js文件msg为html的字符串，这样页码就会对html进行渲染输出到页面方法2：创建一个filter过滤器然后将此过滤器添加到ng-bind-html所绑定的数据中，便实现了在数据加载时对于html标签的自动转义。
  • 盘点前端开源JS框架和库 前端王小婷
    新的Javascript库层出不穷，从而Web社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的Javascript框架和库近乎不可能，所以在这篇文章中主要介绍一些对前端发展最具影响力的前端框架。接下来让我们来共同研究一些主流前端框架、库和工具，并讨论它们的适用场景。1.angular.Js地址：http://www.runoob.com/angularjs/angularjs-tuto
  • ng-Route和ui-router的区别 牛奶大泡芙
    AngularJs可以实现页面的局部刷新，通过改变url的方式。其中ngRoute是内置的服务，而ui-router是第三方开发的产品，优势在于可以进行视图嵌套，下面简要比较一下两者在使用上的区别。
  • 10个最受欢迎的 JavaScript 框架，以及它们的主要特征和功能 骨灰设计师小X
    多年来，业界已经发布了大量JavaScript框架，怎样进行选择可能是一个挑战。如果你感到困惑，不知道应该选哪个或者究竟哪个适合你，那么我已经帮你解决了问题。在本文中，我将列出用来构建Web应用程序的前10个JavaScript框架。1.AngularJSAngular是最强大、最高效、最开源的JavaScript框架之一。在这个列表中不可能不提及Angular。该框架由Google运营，用于开发
  • 什么是MVVM模式？ 若年封尘 前端mvvmmvcmvpvue.js
    文章目录前端的三大MV*模式：MVVM模式：ViewModel的作用：MVVM的组成部分：前端流行框架：前端的三大MV*模式：MVVM模式：MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当下流行的MVVM框架有：Vue.js、AngularJS。MVVM即模型-视图-视图模型。模
  • Vue前端框架选型论证 秋枫落落 vue
    Vue前端框架选型论证文章目录Vue前端框架选型论证1.前端框架的演变1.1前端框架的演变历史1.2web1.0时代1.3后端MVC时代1.4前端MVC时代1.5MVP时代1.6MVVM时代2.前端框架的演变总结3.前端MVVM三大框架AngularJS、Vue、React对比选择3.1三大框架社区活跃度对比3.2市场应用情况对比3.3前端MVVM三大框架AngularJS、Vue、React对比
  • AngularJS常见问题 zhuhangit AngularJSangular.js前端框架
    AngularJS常见问题Useskip-importoptiontoskipimporting//问题：在该工程下，存在多个module文件//解决方案：创建组件时，指定module文件：nggeneratecomponent[options]nggccomponentName--module=app.module(往app.module.ts中添加创建的组件信息)修改第三方组件的样式//ng-
  • 深入AngularJS源码，写自己的 JngularJS（1） zidea
    最近大部分时间都花费在研究AngularJS，AngularJS作为全能的javascript框架（不是库呀），很强大也很成熟。在国内也被广泛应用到实际web前端开发中。也是前端工程师追逐和热捧的前端框架之一。我最近也是在项目中实际用了一段时间。好处就不说了，框架中也存在许多让人困惑不解的地方，例如digest是如何工作的？angularJS为什么提供多种方式来定义directive指令集。ser
  • ionic3 项目使用Cordova自定义插件 星辰大海_王
    PS：Ionic为什么要用Cordova插件？先看下Ionic是什么？Ionic(ionicframework)一款开源的Html5移动App开发框架,是以AngularJS为基础的移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成androidios移动app应用。phoengap又是什么？PhoneGap是ApacheCordo
  • 项目总结-技术点：将接口获取html代码段，初始到页面 youyoufenglai angularangularsce
    **要实现什么：**angular、require搭建的网站中，将接口获取的html代码段初始到页面；**用到的技术点：**angularJs的$sce服务与ng-bind-html指令js文件中：$scope.qetMsgDetail=function(){layer.load(2,{shade:[0.1,'#000']});$http.post(url,postData).success(fu
  • AngularJs 学习之 ng-repeat-start,ng-repeat-end 指令 IT枫斗者 JAVA基础工作中实际总结编程学习angular.js学习前端java面试javascript
    AngularJs学习之ng-repeat-start,ng-repeat-end指令ng-repeat指令：循环输出数组或者对象内容到htmlapplywatch*{margin:0;padding:0;}姓名介绍{{item.name}}{{item.content}}varapp=angular.module("myApp",[]);app.controller('myCtrl',funct
  • Vue基础语法篇 Gao_xu_sheng vue.js前端javascript
    1.1web前端三大主流框架web前端三大主流框架都是Angular、React、Vue。1.2AngularAngularJS诞生于2009年，由MiskoHevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular1.3R
  • AngularJs 基础（60分钟入门） weixin_34405332 测试uic#
    AngularJS是一个创建富客户端应用的JavaScriptMVC框架。你仍然需要具有服务端后台，但大多数的用户交互逻辑将放到客户端上处理。它可以创建单页的应用程序，一个页面的应用仅仅需要HTML,CSS和JavaScript在客户端。它的目标是增强页面的模型-视图-控制（MVC）的功能，为简化开发和测试。单页Web应用（singlepagewebapplication，SPA），就是只有一张W
  • 【AngularJs】已改变ui-sref的state，但是href的url未改变 smart_dream angular.jsui前端
    改变跳转路径去修改去修改去修改-->去修改解决方案：angularui-Dynamicallysetthevalueofui-srefAngularjs-StackOverflow
  • AngularJs入门使用 swimming_in_it_ 前端插件+框架angularJs基础介绍demo
    AngularJS介绍AngularJs是一个前台框架，使用JavaScript编写的库。用户可以在使用该框架，在前台中进行数据双向绑定，实现前端的MVC数据显示。在使用AngularJs框架的时候，只需要在前台的html中引入AngularJs文件即可。使用非常方便。AngularJs基础操作在讲解基础指令前，先普遍一些基础概念。用户在页面中引入AngularJs文件后，可以创建WebApp和控
  • AngularJS快速入门指南12：模块 ddjq1044 javascriptViewUI
    AngularJS模块定义了一个application。模块是一个application中不同部分的容器。application中的所有控制器都应该属于一个模块。带有一个控制器的模块下面这个application（"myApp"）包含一个控制器（"myCtrl"）：{{firstName+""+lastName}}varapp=angular.module("myApp",[]);app.cont
  • AngularJS快速入门 chongxiaocheng 框架angularjsweb前端前端开发框架
    AngularJS.1.0快速入门目录1.简介2.基本编写结构3.基本语法及基础结构组成1.简介AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌握的框架之一。AnuglarJS是前后端分离软件架构模型下，前端业务处理的解决方案！总之，Ang
  • AngularJS基础入门文档 水阳。 前端angular.js前端javascript
    引言：AngularJS是一个开源的JavaScript框架，用于构建动态Web应用程序。它提供了一套强大的工具和功能，使开发人员能够更轻松地构建交互性强、响应式的网页应用。本文将为您介绍AngularJS的基本概念和使用方法，帮助您快速入门并掌握AngularJS的核心知识。一、环境搭建在开始使用AngularJS之前，您需要确保以下环境已经准备好：浏览器：推荐使用最新版本的Chrome、Fir
  • node.js漏洞总结 carrot11223 网络安全node.js漏洞
    js开发的web应用和php/Java最大的区别就是js可以通过查看源代码的方式查看到编写的代码，但是php/Java的不能看到，也就是说js开发的web网页相当于可以进行白盒测试。流行的js框架有：1.AngularJS2.ReactJS3.Vue4.jQuery5.BackboneJS6.NodeJS7.Ember8.Meteor9.Polymer10.Aurelia那怎么判断一个网站是不是由
  • Angularjs 动态获取屏幕宽度 壹只很拽的猫
    我是写在directivewindow.onresize=function(){$scope.$apply(function(){console.log("document.body.clientWidth",document.body.clientWidth);})};参考文档：angular怎么监听屏幕宽度改变angularjs中如何实现页面自适应？这个看起来能实现但是我没整明白
  • Java 并发包之线程池和原子计数 lijingyao8206 Java计数ThreadPool并发包java线程池
    对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
  • java编程思想 抽象类和接口 百合不是茶 java抽象类接口
    接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface;
  • [房地产与大数据]房地产数据挖掘系统 comsci 数据挖掘
           随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb
  • 数组队列总结 沐刃青蛟 数组队列
          数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class
  • Oracle存储过程无法编译的解决方法 IT独行者 oracle存储过程　
    今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
  • 重装系统之后oracle恢复 文强chu oracle
    前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl
  • python学习二（ 一些基础语法） 小桔子 pthon基础语法
    紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&
  • svn 常用命令 aichenglong SVN版本回退
    1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio
  • 某小公司面试归来 alafqq 面试
    先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru
  • 动态数组的存储速度比较 集合框架 百合不是茶 集合框架
    集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器
  • 用JS实现一个JS对象，对象里有两个属性一个方法 bijian1013 js对象
    <html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
  • 探索JUnit4扩展：使用Rule bijian1013 java单元测试JUnitRule
            在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n
  • [Gson一]非泛型POJO对象的反序列化 bit1129 POJO
    当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    
  • 【Kakfa五】Kafka Producer和Consumer基本使用 bit1129 kafka
    0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor
  • lsyncd实时同步搭建指南——取代rsync+inotify ronin47
    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
  • java-9. 判断整数序列是不是二元查找树的后序遍历结果 bylijinnan java
    public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是
  • MySQL的sum函数返回的类型 bylijinnan javaspringsqlmysqljdbc
    今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows
  • java设计模式之单例模式 chicony java设计模式
    在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ
  • javascript取当月最后一天 ctrain JavaScript
    <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont
  • linux tune2fs命令详解 daizj linuxtune2fs查看系统文件块信息
    一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
  • 做有中国特色的程序员 dcj3sjt126com 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
  • Android：TextView属性大全 dcj3sjt126com textview
    android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
  • tomcat虚拟目录安装及其配置 eksliang tomcat配置说明tomca部署web应用tomcat虚拟目录安装
    转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp
  • 浅谈：APP有哪些常被黑客利用的安全漏洞 gg163 APP
    首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读
  • C#根据网址生成静态页面 hvt Web.netC#asp.nethovertree
    HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri
  • SVG 教程 （一） 天梯梦 svg
    SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量
  • 一个简单的java栈 luyulong java数据结构栈
    public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top
  • 基础数据结构和算法八：Binary search sunwinner AlgorithmBinary search
    Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
  • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 刘星宇 c面试
    12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff));
  • ITeye 7月技术图书有奖试读获奖名单公布 ITeye管理员 活动ITeye试读
    ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他