I am using asp mvc 4 and angular js.
this is my html when the application loads(Course/Index):
<div class="container" ng-app="appModule">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Course Managment</li>
<li>Course Assignment</li>
</ul>
</div>
</div>
</div>
<ng-view></ng-view>
</div>
and this is my appModule:
angular.module("appModule", ["ngRoute", "CoursesListCtrl", "repositoryBaseFactory"])
.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when("/Course/List", {
templateUrl: "templates/coursesList.html",
caseInsensitiveMatch: true
});
}]);
When clicking on the Course Managment link I want the coursesList.html to be loaded. Instead the framework is trying to go the server and find action List and returns an error.
What am I missing here?
Try this
<a ng-href="#/Course/List">Course Managment</a>
Related
I am learning how to implement routing in AngularJS. Everything else is working fine but the views are not getting updated when I click on the navigation.
How can I achieve the desired functionality in the application? I want the navigation to take us to the desired pages without refreshing the page and that's quite obvious.
Here is the code.
Index.html
<!DOCTYPE html>
<html ng-app="routingApp">
<head>
<title>AngularJS routing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="routingAppController">
<!-- Header and Navigation -->
<header>
<nav class= "navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing App</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<!-- Main Body where content will be injected -->
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
Script.js
(function(){
'use strict';
var app = angular.module('routingApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'routingAppController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
app.controller('routingAppController', function($scope){
$scope.message = "This will get updated for sure!";
});
app.controller('aboutController', function($scope){
$scope.message = "This is the about page and it looks awesome!";
});
app.controller('contactController', function($scope){
$scope.message = "This is the contact page!";
});
})();
One of the pages
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
I am doing a project in Symfony2 and Angular JS.
I have installed FOSJsRoutingBundle for routing purposes.
This is my home page - http://localhost/stars/admin/ and i am doing in wamp server.
home page
Home page word fine. You can see a side bar which holds some links like sun, stars, home etc..
My requirement is when i click on these links, it should use angularjs routing, not the default routing..
How can i acheive this..
my layout.html.twig
<body ng-app="myApp">
<div class="container">
<!--Header Bar-->
<div id="header"></div>
<!--Side Bar-->
<div id="sidebar">
<ul class="sidebar-menu">
<li class="active treeview">
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#sun">
<span>Sun</span>
</a>
</li>
<li>
<a href="#/stars">
<span>Stars</span>
</a>
</li>
<li>
<a href="#/planets">
<span>Planets</span>
</a>
</li>
<li>
<a href="#/moon">
<span>Moon</span>
</a>
</li>
</ul>
</div>
<!--Main Content-->
<div id="content" ng-view>{% block body %}{% endblock %} </div>
</div>
</body>
<!--Angular JS-->
<script src="{{ asset('js/angular.js') }}"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
<script type="text/javascript">
Routing.generate('_home_url');
</script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('', {templateUrl: Routing.generate('_home_url')}).
when('/sun', {templateUrl: Routing.generate('_sun_url')}).
otherwise({redirectTo: ''});
}]);
</script>
my routing.yml
# app/config/routing.yml
fos_js_routing:
resource: "#FOSJsRoutingBundle/Resources/config/routing/routing.xml"
_home_url:
pattern: admin/
defaults: { _controller: AppBundle:admin/index:list }
options:
expose: true
_sun_url:
pattern: admin/sun
defaults: { _controller: AppBundle:admin/sun:index }
options:
expose: true
my config.yml
fos_js_routing:
routes_to_expose: [ _home_url,_sun_url ]
Please help me, i am new user in symfony2 and angularJS..
You can use ngHref directive see this
reference
<a ng-href="/sun"><span>Sun</span></a>
Alternatively you can use ui-router
alterative for angular ngRoute and you can use ui-sref directive for the links see this reference
The problem is simple and the answer is probably pretty obvious but I really can't find out what's going wrong here.
JSFIDDLE
As you can see, no links are generated and no views are loaded.
I have looked into related problems aswell (e.g this one) but it wasn't much of a use.
index.html
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the Home Page</p>
</div>
</script>
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
}]);
EDIT
I should have mentioned that I included ui-router in the External Resources tab in my fiddle.
This is what gets generated by JSFiddle:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view=""></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the Home Page</p>
</div>
</script>
<script type="text/javascript">
//<![CDATA[
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
}]);
//]]>
</script>
</body>
</html>
EDIT #2
It seems like this was a problem with JSFiddle's External Resources rather than ui-router.
Working example
You have to include angular-ui-router in your index.html
You can for example add:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
Here is the working JSFIDDLE
ui.router is a separate module. You need to download it and include a script, e.g. download from here
There is a default angular router, but that one probably should be added as a separate script as well.
Angular UI-Router is a client-side Single Page Application routing framework for AngularJS.Routing frameworks for SPAs(Single Page Applications) update the browser's URL as the user navigates through the app.
Check this fiddle
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
}).state('about', {
url: '/about',
templateUrl: 'about.html'
});
I'm learning angular and try to create a navbar menu and set 'active' class based on current page.
index.html
<html lang="en" data-ng-app="Afe" class="no-js">
<head>
<!-- code omitted.. -->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" data-ng-init="activeMenu='AfeCoverPage'">
<li data-ng-class="{active: activeMenu=='AfeCoverPage'}" data-ng-click="activeMenu='AfeCoverPage'">AFE Cover Page</li>
<li data-ng-class="{active: activeMenu=='AfeCostEstimate'}" data-ng-click="activeMenu='AfeCostEstimate'">AFE Cost Estimate</li>
<li data-ng-class="{active: activeMenu=='AfeVariance'}" data-ng-click="activeMenu='AfeVariance'">AFE Variance</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view=""></div>
<!-- code omitted.. -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
app.js
angular.module('Afe', ['ngRoute', 'Afe.controllers']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/AfeCoverPage', { templateUrl: 'partials/AfeCoverPage.html', controller: 'AfeCoverPageCtrl' });
$routeProvider.when('/AfeCostEstimate', { templateUrl: 'partials/AfeCostEstimate.html', controller: 'AfeCostEstimateCtrl' });
$routeProvider.when('/AfeVariance', { templateUrl: 'partials/AfeVariance.html', controller: 'AfeVarianceCtrl' });
$routeProvider.otherwise({ redirectTo: '/AfeCoverPage' });
}]);
controllers.js
angular.module('Afe.controllers', []).
controller('GlobalCtrl', ['$scope', function ($scope) {
}]).
controller('AfeCoverPageCtrl', ['$scope', function ($scope) {
}]).
controller('AfeCostEstimateCtrl', ['$scope', function ($scope) {
}]).
controller('AfeVarianceCtrl', ['$scope', function ($scope) {
}]);
Currently it's working, when Afe Cover Page menu is clicked, the <li> element will have 'active' class, but I'm not sure whether using ng-click is the right way. The code seems to be duplicated. Could anyone show me the best way to do it?
You could just use the $location service and a function in your ng-class directive that returns a bool if it matches the current path.
<div class="collapse navbar-collapse" ng-controller="MenuController">
<ul class="nav navbar-nav">
<li data-ng-class="{active: isActive('/AfeCoverPage')}">AFE Cover Page</li>
<li data-ng-class="{active: isActive('/AfeCostEstimate')}">AFE Cost Estimate</li>
<li data-ng-class="{active: isActive('/AfeVariance')}">AFE Variance</li>
</ul>
</div>
With a controller:
.controller('MenuController', function ($scope, $location) {
$scope.isActive = function (path) {
return $location.path() === path;
}
});
i was implementing NgRoute, but somewhere in angularjs tutorials they introduce ui-route, i watch some video tutorials about this ui-route, i find it cool and more fluent than the mg-route, so i went to ui-route github page where i've downloaded the js file, i have add it in scripts references, and start following there guide, but i haven't successfully get it to work, and without any console errors, when i go to site web it shows just the index.html !!
App.js
var app = angular.module("KhbyraApp", ['ui.router', 'ngCookies']);
app.config(function ($stateProvider, $urlRouteProvider, $httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
$urlRouteProvider.otherwise("/login");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "app/views/login.html",
controller: "LoginController"
})
.state('register', {
url: "/register",
templateUrl: "app/views/register.html",
controller: "RegisterController"
})
.state('articles', {
url: "/articles",
templateUrl: "app/views/articles.html",
controller: "RegisterController"
});
index.html
//<html>...
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="articles">Home</a></li>
<li><a ui-sref="login">Login</a></li>
<li><a ui-sref="register">Register</a></li>
<li ng-if="isAuth" ng-click="LogOut()">LogOut</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div ui-view></div>
//script....
</body>
There is a working (simplified) plunk, showing that this setting is working.
The only (but essential) change is the name of the '$urlRouteProvider' which should be $urlRouterProvider (the router instead of route)
function( $stateProvider , $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");