标签: angularjs-ng-route
$ routeChangeStart在IE8中被多次调用
我们正在为我们的应用程序支持IE8浏览器.最近我们将角度版本从1.0.8升级到1.2.16
使用较新版本的应用程序适用于所有浏览器,但我们在IE8中看到了ngRoute的问题.
它多次广播"$ routeChangeStart".
$ rootScope.$ on("$ routeChangeStart",(event:ng.IAngularEvent,next,current)=> {
});
为了识别我在上面的代码中添加了console.log,它只在IE8中被调用了两次.
在角度版本1.0.8中,相同的代码片段在浏览器控制台中提供一次console.log注释.
IE8的ngRoute(角度版本1.2.16)有问题吗？
推荐指数
解决办法
查看次数
如何将revealjs整合到angularjs中
我需要通过angularjs route provider加载/启动revealjs幻灯片,以下是代码.
但它的工作原理却显示幻灯片尺寸异常非常小,任何线索为何？
1)index.html
<!doctype html>
<html ng-app="ngApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
</head>
<body>
<a href="revealjs" style="display:none;" id="revealjsId"></a>
<button type="button" onclick="startRevealjs()">start revealjs slides</button>
</div>
<script>
function startRevealjs()
{
var res=document.getElementById("revealjsId");
res.click();
}
angular.module('ngApp', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/revealjs', {
templateUrl: 'revealjs.html'
});
//for html5 compatibility
$locationProvider.html5Mode(true);
}])
</script>
<form action="" method="post">
<div ng-view> </div>
</form>
</body>
</html>
2)revealjs.html
<body>
<div …推荐指数
解决办法
查看次数
没有Index.html设计的登录页面 - ngRoute(AngularJS)
我正在使用ngRoute我的AngularJS应用程序(myApp)的路由,但是我有一个问题:我不知道如何不将我的index.html设计(带有我的所有侧边栏)应用到我的login.html页面,这似乎默认情况下应用它被定义为一个视图.我想为我的login.html页面设计一个简单的设计:只填写两个字段,而不是我的设计index.html,它适用于myApp中的所有视图.因此,我不知道如何做我的路由来完成这样的任务.非常感谢你.
< - 这是我在myApp中如何进行路由的示例(仅针对一个视图 - "/ view1") - >
样本app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ngCookies',
'myApp.view1',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
对于每个视图,都有一个.js文件关联,我定义了它的路由和控制器.例如,对于视图"/ view1" - view1.js:
'use strict';
angular.module('myApp.view1', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', function($scope) {
// something
}]);
我的样本index.html: …
推荐指数
解决办法
查看次数
ngRoute似乎不起作用
如果我尝试使用ngRoute方法来更改主页面视图,我有一个似乎根本不起作用的Web应用程序.路由配置如下所示:
var app;
app = angular.module('genehaxx', ['ngGrid','ngRoute', 'ngSanitize', 'ui.bootstrap','genehaxx.filters', 'genehaxx.services'])
.config(function($routeProvider){
//route setup
$routeProvider
.when('/workflows', {
templateURL: '/partials/workspace_view.html',
controller: 'MainController'
})
.when('/jobs', {
templateURL: '/partials/submissions_view.html' ,
controller: 'MainController'
})
.when('/', {
templateURL: '/partials/analyses_view.html',
controller: 'MainController'
})
.when('/analyses', {
redirectTo: '/'
})
.otherwise({
redirectTo: '/'
});
});
function MainController($scope, $modal, $rootScope, User, Data, Workflow, Step){
//lots of proprietary code here..
}
我在部分前面尝试过和没有'/'.我已经尝试了它的正常web服务器反向代理nginx和直接在其目录下的http-server.在这两种情况下,都没有证据表明从服务器请求了部分页面.主要观点有点毛茸茸,但是相关的位看起来像:
<!doctype html>
<html lang="en" ng-app="genehaxx" >
<head>
<meta charset="utf-8">
<title>Welcome to Genengine!</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css"/> …推荐指数
解决办法
查看次数
Angular ngRoute无法获取视图
我试图在应用程序中使用Angular的路由机制,但是在单击应该导致路由的元素时我得到的是不能GET viewName,其中viewName是任何视图.
这是我的app.js脚本文件:
var app = angular.module('actsapp', ['ngRoute']);
//Define Routing for app
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/student_list.html',
controller: 'StudentListController'
})
.when('/Students', {
templateUrl: 'views/student_list.html',
controller: 'StudentListController'
})
.when('/RegisterStudent', {
templateUrl: 'views/register_student.html',
controller: 'StudentRegistrationController'
});
}]);
app.controller('StudentListController', function($scope) {
$scope.message = 'This is student list screen';
});
app.controller('StudentRegistrationController', function($scope) {
$scope.message = 'This is student registration screen';
});
这是我的index.html:
<!DOCTYPE html>
<html ng-app="actsapp">
<head>
<title></title>
<link href="style/style.css" rel="stylesheet" />
<link href="style/bootstrap.css" rel="stylesheet" />
<script src="scripts/jquery-1.js"></script>
<script src="scripts/angular/angular.js"></script>
<script …推荐指数
解决办法
查看次数
Angularjs ng-view不起作用
我正在尝试创建一个简单的视图angualrjs + ngRoute.
为什么它对我不起作用???
请问,任何人都可以看看我的Plunker示例,并向我解释我做错了什么？
我的index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Route training</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main_container">
<div class="inner" ng-app="app">
<div class="container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
</div>
</div>
<div class="inner" ng-app="views">
<h3>Views Menu</h3>
<ul>
<li><a href="index.html">Back to HOME</a></li>
<li><a href="#/developers">Our Developers</a></li>
<li><a href="#/designers">Our Designers</a></li>
</ul>
<div ng-view></div>
</div>
</div>
</body>
</html>
这是app.js:
var app = angular.module('app', []);
var views = angular.module('views', ['ngRoute']);
views.config(function($routeProvider, …推荐指数
解决办法
查看次数
将参数传递给解析函数
我在弄清楚如何将参数传递给ngRoute解析的一部分的函数时遇到了麻烦。
就我而言，我正在用令牌做东西。这些令牌是键入的，因此您不能使用相同的令牌进行确认，发送电子邮件和重设密码。这是我的路线的定义方式：
.when("/confirm/:token", {
controller: "confirmEmailController",
templateUrl: "/app/views/confirmEmail.html",
resolve: {
tokenStatus: getTokenStatus
}
})
.when("/reset/:token", {
controller: "resetPasswordController",
templateUrl: "/app/views/resetPasswordEmail.html",
resolve: {
tokenStatus: getTokenStatus
}
})
这是getTokenStatus同时为它们调用的函数：
var getTokenStatus = ["$q", "$route", "tokenService", function($q, $route, tokenService)
{
var deferred = $q.defer();
var tokenType = ???? //<-- how do I pass this?
tokenService
.getTokenStatus($route.current.params.token, tokenType)
.success(function(response)
{
deferred.resolve(true);
})
.error(function()
{
deferred.resolve(false);
});
return deferred.promise;
}];
问题是，为了避免代码重复，我需要以某种方式传递代码中标记的令牌类型的值。我该怎么办？
在过去的两个小时中，我一直在弄弄这个，但是似乎无法弄清楚。
推荐指数
解决办法
查看次数
ngRoute - 单独文件中的多个控制器
我现在正在将我的网络应用程序更改为单页面Web应用程序.我按照这个教程.链接
这是一个示例script.js
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
}); …推荐指数
解决办法
查看次数
ngRoute不使用外部控制器文件
当我在app.js文件中包含我的控制器时,路由和控制器功能正常工作.它看起来像这样:
的index.html
<!DOCTYPE html>
<html data-ng-app='ckbApp' >
<head >
</head>
<body>
<div class="container" >
<div ng-include="'header.html'"></div>
<div ng-view class="viewBody">
</div>
<div ng-include="'footer.html'"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="ckbApp.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/About', {
templateUrl: 'Views/About.html',
controller: 'controller'
}).
when('/Blog', {
templateUrl: 'Views/Blog.html',
controller: 'controller'
}).
when('/FAQ', {
templateUrl: 'Views/FAQ.html',
controller: 'controller'
}).
when('/Home', {
templateUrl: 'Views/Home.html',
controller: 'controller'
}).
otherwise({
redirectTo: '/Home'
});
}]);
app.controller('controller', ['$scope', …推荐指数
解决办法
查看次数
ASP .NET 5中的简单Angular SPA - 启动时获取空白页面
我正在尝试在ASP .NET 5中设置一个非常简单的Angular单页面应用程序.我已经开始了一个空项目 - 目前唯一的角度依赖是ngRoute.
问题:
当我运行项目时,我的浏览器中出现一个空白页 - 开发人员控制台中没有错误.
编辑
我[]从angular.module('app', []).controller建议中删除了但现在抛出了一个错误:
未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块应用程序:错误:[$ injector:unpr]未知提供程序:a
我正在使用npm,bower和grunt - 但我不认为他们与这个问题有任何关系.
这是项目结构的样子:
这是index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
<!-- angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-route.js"></script>
<!-- app -->
<script src="app.js"></script>
</head>
<body ng-cloak>
<div ng-view>
</div>
</body>
</html>
这是app.js:
(function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.html',
controller: 'home'
})
.otherwise({
redirectTo: '/'
});
}); …javascript angularjs single-page-application angularjs-ng-route asp.net-core
推荐指数
解决办法
查看次数
角度偏
目前我正在尝试将现有的Knockout应用程序迁移到Angular MEAN堆栈应用程序.在淘汰赛中,index.html包含此代码
<% layout('layout') -%>
<div data-bind="ifnot: id">
<%- partial('partials/invitation-creating.html') %>
</div>
<div data-bind="if: id">
<%- partial('partials/invitation-done.html') %>
</div>
如何使用单个控制器(或)多个控制器实现这种带有Angular路径的部分html文件加载.保存'invitation-creating.html'页面后,我应该可以转到'invitation-done.html',但网址应该相同(我不想要这个 - > websiteurl/invitation_id)
请参阅http://invitify.azurewebsites.net中的操作,当您创建邀请时,它将带您到下一页(invitation-done.html),而无需浏览器更改它的URL.这是在淘汰赛中实现的,但我也希望在我的Angular应用程序中实现相同的效果.Knockout代码在github上,供您查看.https://github.com/scriptstar/KOInvitify
在Angular应用程序中实现此类行为的最佳实践是什么.
请帮忙.谢谢.
推荐指数
解决办法
查看次数
AngularJS $ routeParams未定义
我是AngularJS的新手,我试图在我的代码中使用$ routeParams,在这里搜索前面的答案我已经确保我已经添加'$ routeParams'作为我的数组注入和函数的一部分而且我没有使用ui-router模块.但是当我尝试记录它时,我仍然得到一个未定义的.
我的Angular App如下:
var RAFITOAPP = RAFITOAPP || {}
RAFITOAPP.app = angular.module('app', [
'ngRoute'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/line/:userAccountId", {templateUrl: "assets/partials/line.html", controller: "LineController"}).
when("/floormap", {templateUrl: "assets/partials/floormap.html", controller: "MapController"}).
when("/report", {templateUrl: "assets/partials/reports.html", controller: "ReportController"}).
when("/addNew", {templateUrl: "assets/partials/add_new.html", controller: "addNewController"}).
when("/profile", {templateUrl: "assets/partials/account.html", controller: "accountSettingsController"}).
otherwise({redirectTo: '/line'});
}]);
我的控制器如下:
RAFITOAPP.app.
controller('LineController', ['$scope','$rootScope','$routeParams', function($rootScope, $scope, $location, $routeParams) {
$scope.$on('$viewContentLoaded', function() {
console.log($routeParams);
change('line');
if(control != 1){
setTimeout(function() {
script1fire();
} , 100);
control = 1;
}
})
}]);
请告知我错过了什么？任何帮助将非常感激.如果您希望看到导致问题的HTML页面
推荐指数
解决办法
查看次数
在angularJS中使用ngRoute和'controller as'语法
我有以下config和controllers
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'page-home.html',
controller: 'homeController',
controllerAs: 'hctrl'
})
.when('/about', {
templateUrl: 'page-about.html',
controller: 'aboutController',
controllerAs: 'actrl'
})
.when('/contact', {
templateUrl: 'page-contact.html',
controller: 'contactController',
controllerAs: 'cctrl'
});
})
.controller('homeController', function(){
this.pageClass = 'page-home'
})
.controller('aboutController', function(){
this.pageClass = 'page-about'
})
.controller('contactController', function(){
this.pageClass = 'page-contact'
});
我的问题出现在我使用的时候index.html.
<div class="page {{pageClass}}" ng-view></div>
由于我没有使用$scope,只是写作{{pageClass}}不起作用.我怎样才能使用controller as syntax？
编辑
我有几个很好的答案.我还发现了另一种方法,如果你希望把你做这个controllerAs有不同的名称值:hctrl, actor并ctrl(像我上面的代码):
你可以在html中这样做:
<div …推荐指数
解决办法
查看次数
标签 统计
angularjs ×13
javascript ×4
ngroute ×3
html ×2
asp.net-core ×1
controller ×1
ng-view ×1
reveal.js ×1