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");
Related
I am a beginner and I can't find what am I doing wrong here, can someone help me?
Below is the code I use
index.html
index.html
<body ng-app="psJwtApp">
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="register">Register</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/app.config.js"></script>
<!-- endbuild -->
app.config.js (Code for app.config.js)
I use ui.router.
app.config.html
'use strict';
angular.module('psJwtApp', ['ui.router']).config('psJwtApp',
function ($stateProvider) {
$stateProvider
.state('register', {
url: '/regiter',
templateUrl: 'views/register.html'
})
.state('home', {
url: '/ ',
templateUrl: 'views/main.html'
});
});
var myApp = angular.module('psJwtApp', ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
url: "#",
templateUrl: "home.html",
controller: "HomeCtrl"
}).state("register", {
url: "#",
templateUrl: "register.html",
controller: "registerCtrl"
});
});
myApp.controller('HomeCtrl', ['$scope', function($scope) {
}])
myApp.controller('registerCtrl', function($scope, $stateParams) {
})
DEMO
I'm trying to display navigation bar menu items using ng-repeat and I'm using ui router simultaneously, but output is not what I expected.
<!--HTML-->
<body>
<div ng-app="navApp" ng-controller="navCtrl">
<a ng-repeat="item in navItems" ui-sref="{{item.sref}}">{{item.label}}</a>
</div>
<div ng-app="mainApp">
<div ui-view></div>
</div>
</body>
//JS
angular.module('navApp', []).controller('navCtrl', function($scope){
$scope.navItems = [
{'sref': 'home', 'label': 'Home'},
{'sref': 'login', 'label': 'Login'},
{'sref': 'signup', 'label': 'Signup'},
{'sref': 'other', 'label': 'Label'}
];
});
var app = angular.module('mainApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
// $urlRouterProvider.otherwise('/');
$stateProvider.state('login', {
url: '/login',
templateUrl:'login.html',
controller: function($scope) {
$scope.message = 'Login Page'
}
}).state('signup', {
url: '/signup',
templateUrl:'signup.html',
controller: function($scope) {
$scope.status = 'Signup Page'
}
}).state('home', {
url: '/',
template:'Home Page'
}).state('other', {
url: '/other',
template:'Other Page'
});
});
I'm getting output as:
HomeLoginSignupLabel
Here sref are not working as href. Using static navigation menu instead of displaying dynamically then everything is working fine. I think both apps are executing at same causing this issue.
use some navbar like bootsrap or semantic-ui etc.
bootstrap example :
<body>
<div ng-app="navApp" ng-controller="navCtrl">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li ng-repeat="item in navItems"><a ui-sref="{{item.sref}}">{{item.label}}</a></li>
</ul>
</nav>
<div ng-app="mainApp">
<div ui-view></div>
</div>
</body>
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'
});
Below is the html and cakephp code.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
// configure the routes
$routeProvider
.when('/', {
// route for the home page
templateUrl: 'home.html',
controller: 'homeController'
})
.when('/about', {
// route for the about page
templateUrl: 'about.html',
controller: 'aboutController'
})
.when('/contact/', {
// route for the contact page
templateUrl: 'contact.html',
controller: 'contactController'
})
.otherwise({
// when all else fails
templateUrl: 'routeNotFound.html',
controller: 'notFoundController'
});
});
</script>
</head>
<body ng-controller="homeController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
Below codes are on default.ctp using cakephp3
<ul>
<li>About</li>
<li>Contact Us</li>
</ul>
Clicking on #about url "http://localhost/finalcake3/pages/about"
Clicking on #contact url "http://localhost/finalcake3/pages/contact-us"
But adding the script below will not work using angular js in cakephp.
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
// configure the routes
$routeProvider
.when('/about', {
// route for the about us page
templateUrl: 'http://localhost/finalcake3/pages/about',
controller: 'AboutCNTRL'
})
.when('/contact', {
// route for the contact us page
templateUrl: 'http://localhost/finalcake3/pages/contact-us',
controller: 'ContactCNTRL'
})
});
</script>
I want my existing cakephp website to use angular js. Is there any codes to include I need in-order this to function.
first question ? why do you use AngularJs like this ? You can do an APIrest with CakePhp and retrieve easily Json Datas with Angular when you call the url of your cakephp project which return Json data. Better to use Angular like this.
Then, you have just to create your html template with your {{datas}} and call the json datas via your cakephp urls.
API rest CakePhp2
http://book.cakephp.org/2.0/fr/development/rest.html
API rest CakePhp3
http://book.cakephp.org/3.0/fr/development/rest.html
templateURL: is expecting a path to your template partial files in the directory. Try changing the path to whatever the relative path should be. A url with "/" prefix is relative to the domain, without the "/" prefix it will be relative to your base url. The absolute paths you are pointing to are resolved via CakePHP so Angular doesn't know what to to with those paths as they don't point directly to a partial template file.
so...
templateUrl: '/finalcake3/pages/about.html',
or
templateUrl: 'finalcake3/pages/about.html',
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>