我正在玩新的角度路由器,并想尝试一个用例,我有一个组件和一个嵌套组件.
下面是我编写的用于定义两个组件和路由的JavaScript代码:
angular.module('app', ['ngNewRouter'])
.controller('AppController', function ($router) {
$router.config([
{
path: '/parent',
component: 'parent'
}
]);
})
.controller('ParentController', function ($router) {
this.name = 'Parent component';
$router.config([
{
path: '/child',
component: 'child'
}
]);
})
.controller('ChildController', function () {
this.name = 'Child component';
})
.config(function ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(function (compName) {
return compName + '.html';
});
});
和HTML部分:
<!-- index.html -->
<body ng-controller="AppController as app">
<a ng-link="parent">Go to parent</a>
<div ng-viewport></div>
</body>
<!-- parent.html -->
{{ parent.name }}<br/>
<a ng-link="child">Show …我正在使用angular 1.5 beta 2和来自Angular 2 alpha 45的新路由器.
我找不到使用Angular 1的最新路由器
的使用示例.我可以找到使用Angular 2的路由器的使用示例@RouteConfig.
有人可以解释我如何配置角度1控制器吗？并且,如果可能的话,一个完整的工作示例？
如何在Angular 2中导航到不同的URL？我知道我们可以使用JavaScript
window.location.href ='...';
但这似乎是错误的,会导致页面刷新.我非常确定Angular 2中应该有一些功能,允许您在不刷新页面的情况下在URL之间移动.我似乎无法在文档中找到它.
提前致谢!
我正在玩Angular 2.0 new router,我尝试使用类似于Angular 1.X ui-router/ng-route解析机制的东西.
我试图通过以下方式实现此目的RouteData:
import {Component, ViewEncapsulation} from 'angular2/core';
import {
RouteConfig,
ROUTER_DIRECTIVES
} from 'angular2/router';
// import {HTTP_PROVIDERS} from 'angular2/http';
import {HomeCmp} from '../home/home';
import {AboutCmp} from '../about/about';
import {NameList} from '../../services/name_list';
import {PersonalizationList} from '../../services/personalization_list';
@Component({
selector: 'app',
viewProviders: [NameList, PersonalizationList],
templateUrl: './components/app/app.html',
styleUrls: ['./components/app/app.css'],
encapsulation: ViewEncapsulation.None,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/', component: HomeCmp, as: 'Home', data: this.history },
{ path: '/about', component: AboutCmp, as: 'About' }
])
export class …我正在Symfony2 Bundle中开发AngularJS 1.4应用程序.Symfony提供"后端"(API)和Angular前端(当然).
我正在使用新的路由器并坚持使用几个指南和最佳实践示例建议的组件驱动文件夹方法.但是由于我使用gulp构建我的JS并且仅包含完整的Build-Files,因此Angular控制器无法找到其模板存在问题.
我告诉你我的解决方案,我不喜欢:
(function () {
'use strict';
angular
.module('myModule', ['ngNewRouter', 'myModule.dashboard'])
.config(TemplateMapping)
.controller('AppController', AppController);
/* @ngInject */
function AppController ($router) {
$router.config([
{ path: '/', redirectTo: '/dashboard' },
{ path: '/dashboard', component: 'dashboard' }
]);
}
/* @ngInject */
function TemplateMapping($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(function (name) {
return {
'dashboard': '/bundles/mybundle/templates/dashboard/dashboard.html'
}[name];
});
}
}());
我编写了我的Angular代码,src/myBundle/Resources/js/然后将最终的Build放到最后的Build中,src/myBundle/Resources/public/然后在包含Angular应用程序的Twig模板中提供.
我现在正在做的,基本上是将我的组件的模板放在它们所属的位置(这将是src/myBundle/Resources/js/components/dashboard/仪表板示例),而是放入src/myBundle/Resources/public/templates.
我必须告诉路由器模板位于其他地方$componentLoaderProvider.setTemplateMapping().
我有两个问题:
AppController)模板的位置吗？我正在使用Angular 1.5并试图从使用1.4中的ui-router迁移到1.5中的新组件路由器.
但是,当我更新到1.5时,我没有看到在我的配置中注入"$ router"的方法.
我知道我可以从这个存储库下载angular_1_router.js:https://github.com/brandonroberts/angularjs-component-router
但是新的路由器应该包含在1.5中吗？
对不起,似乎没有太多关于此的文档.只有过时的文档引用了Angular 1.4和Angular 2.0文档.
当我尝试使用angular_1_router.js文件时,我$injector:modulerr在尝试使用'ngComponentRouter'时得到了一个,所以我无法将该路由作为一种解决方法.
我正在尝试按照本教程:
https://angular.github.io/router/getting-started
为什么AppController.$ routeConfig undefined？
angular.module('app', ['ngNewRouter', 'app.home'])
.controller('AppController', ['$router', AppController]);
AppController.$routeConfig([
{path: '/', component: 'home' }
]);
function AppController ($router) {}
我的HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<title>My app</title>
</head>
<body ng-app="myApp" ng-controller="AppController as app">
<div ng-viewport></div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-new-router/dist/router.es5.js"></script>
<script src="./components/home/home.js"></script>
<script src="app.js"></script>
</body>
</html>
我试图在Angular 2上设置一个简单的测试应用程序.我有3个页面/组件,我想用新的组件路由器加载.我已经完成了半工作.目前我有两个问题......
1 -如果键入要转到Ex的组件的路径." http://127.0.0.1:8080/Test2 "而不是加载我的Test2页面,它无法说它找不到那条路线.
2 -尝试加载不同的页面时,第一次单击链接时,它将正确加载页面.当我点击链接时,所有其他页面都会抛出异常.
这是我的设置:
App.ts
import {Component, bootstrap, provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router';
import {Test1} from './Test1';
import {Test2} from './Test2';
import {Test3} from './Test3';
@Component({
selector: 'my-app',
template: '<test1></test1><router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES, Test1, Test2]
})
@RouteConfig([
{path: '/', as: 'Home', component: Test1},
{path: '/Test2', as: 'Test2', component: Test2},
{path: '/Test3', as: 'Test3', component: Test3}
])
class AppComponent {
constructor() {}
}
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]); …