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',
Related
My angular routing is not working (clicking link does not cause route change):
var smu72App = angular.module("smu72App", [
"ngRoute"
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/templates/home.html",
controller: 'smu72Controller'
})
.when("/objects", {
templateUrl: "/templates/objects.html",
controller: 'smu72Controller'
})
.when("/object/:Id", {
templateUrl: '/templates/object.html',
controller: 'smu72Controller'
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
That's main page that hold ng-view (cutted a bit for better reading):
<!DOCTYPE html>
<html ng-app="smu72App">
....
<base href="/">
.....
<body data-spy="scroll" data-target="#navbar" data-offset="0">
...
<div class="collapse navbar-collapse"> //THAT'S SCROLLSPY LINKS (NOT ANGULAR)
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i></li>
<li> УСЛУГИ</li>
<li> OБЪЕКТЫ</li>
<li> OТЗЫВЫ</li>
<li> СЕРТИФИКАТЫ</li>
<li> КОНТАКТЫ</li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-resource.min.js"></script>
<script src="Scripts/simplbox.min.js"></script>
<script src="http://localhost:25018/Scripts/main.js"></script>
<script src="http://localhost:25018/Scripts/app.js"></script>
<script src="http://localhost:25018/Scripts/smu72Controller.js"></script>
</body>
</html>
Declare your module first
angular.module("smu72App", ["ngRoute"]);
Then initialize config
angular.module("smu72App").config("....ur routes in here");
Are you getting any console errors?
I have noticed one morething that ur anchor tag href doesn't match with the routes in ur config section except ur home page and that is why ur home page is loading fine.
Just an example try ur anchor tag like this <a href="#/about"> or like <a href="/about"> coz i think ur not using hash
and create ur route like below
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
I checked Single Page Apps with AngularJS Routing and Templating tutorial
and found Pretty URLs in AngularJS: Removing the # tutorial for remove # tag from URL. I did all the things but I can't get the app working. It would be great help someone can help on this. These are my codes,
// 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, $locationProvider) {
$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'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<base href="/">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<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>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
After the first tutorial my URL become
file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#/
but after Second one URL becomes
file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F
and links stop woking
It's easy to solve.
You just need to inject ($locationProvider) where you declare your module and put this code ($locationProvider.html5Mode(true)) inside the function.
Something like this.
var myApp = angular.module('myApp',[]);
myApp.config(function ($locationProvider){
$locationProvider.html5Mode(true);
});
You must not directly open angular's html files in your browser. You should rather start a simple http server for the same. The easiest way to do so,
Assuming you have Python 2.7 installed on your filesystem:
python -m http.server <portNo>
for serving the directory contents to http://localhost:<portNo>/
Then you also will be able to navigate to http://localhost:<portNo>/about and http://localhost:<portNo>/contact
Example:
Navigating to your project's main directory and then running python -m http.server 8888 would serve files to http://localhost:8888/ , where the routing should work correctly.
First, remove the hashmark from your <a href="#...">s, like <a href="about"> or <a href="/about">. I also suggest you to use ng-href instead of href
Second, use some local http server, like python -m http.server to serve your files.
Note: If you wisht to use html5 mode, and want your app to work well when the user does not land on index.html, but on another route, you must configure the http server to serve index.html on all of your routes. We do it usually by serving index.html directly instead of returning 404.
Finally with the help of above answers I figured to find an answer. (I used wamp server as local web server)
My sile structure
angulRoute
- script.js
- index.html
- pages
----- home.html
----- about.html
----- contact.html
// 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, $locationProvider) {
$routeProvider
// route for the home page
.when('/angulRoute/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/angulRoute/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/angulRoute/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<meta charset="utf-8">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="/angulRoute/"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-href="/angulRoute/about"><i class="fa fa-shield"></i> About</a></li>
<li><a ng-href="/angulRoute/contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
I have an MVC application with Header and Content using Angularjs.
I have defined an ng-app in Content and load the content pages using $routeProvider. This is working fine.
I have a link in Header from where I want to show a page in Content area - this is outside of the ng-app. How can I do this without setting ng-app at the top ? Also suggest if there is some other way to accomplish the same, as many Master page websites are built around this UI design only.
Below is my code showing Master.cshtml and app.js. Let me know incase I need to provide some more code -
Master.cshtml -
#inherits WebViewPage
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
<title>#ViewBag.PageTitle</title>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angularjs/app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<li><a ng-href="#/headerLinkPage1">View cart</a></li>
</div>
</div>
</nav>
<div class="container-fluid" ng-app="rootApp">
<div ng-view></div>
</div>
</body>
</html>
app.js -
var serviceBaseAddress = 'http://localhost/MyWebApi/api/';
var rootApp = angular.module('rootApp', ['ngRoute', 'contentPage1', 'headerLinkPage1'])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/contentPage1', {
templateUrl: '../ContentPage1/Index'
}).
when('/headerLinkPage1', {
templateUrl: '../HeaderLinkPage1/Index'
}).
otherwise({
redirectTo: '/contentPage1'
});
}]);
If I understand you question correctly, you want modularity in your angular routes, you can use ui router to achieve this, I basically created a main app called app and then two sub apps called app1 and app2, try http://plnkr.co/edit/sk5EmMWQgcIfYlOteWtt , Let me know if thats not what you are looking for
(function() {
angular.module('app1', [])
.config(function($stateProvider) {
$stateProvider
.state('app1', {
url: '/app1',
abstract: true,
template: '<div ui-view="app1View"></div>'
})
.state('app1.child1', {
url: '/child1',
views: {
'app1View' : {
template: '<div>child 1, app 1</div>'
}
}
})
})
})();
(function() {
angular.module('app2', [])
.config(function($stateProvider) {
$stateProvider
.state('app2', {
url: '/app2',
abstract: true,
template: '<div ui-view="app2View"></div>'
})
.state('app2.child1', {
url: '/child1',
views: {
'app2View' : {
template: '<div>child 1, app 2</div>'
}
}
})
})
})();
So this way your sub modules app1 and app2 are completely independent of each other and you can add or remove more sub modules or sub routes within each of these sub modules
ngRoute not working while no errors are reported to console .
given no errors to console, how is it possible to follow execution of ngRoute procedures ?
i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.
index.html has navigation links and ngView :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bower_components/angular/angular.js"> </script>
<script src="bower_components/angular-route/angular-route.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
main.js defines the router and the controllers :
var Main = angular.module('Main', ['ngRoute']);
function router($routeProvider) {
var route = {templateUrl: 'partials/default.html'};
$routeProvider.when('', route);
route = {
templateUrl: 'partials/first.html',
controller: 'first'
};
$routeProvider.when('content/first', route);
route = {
templateUrl: 'partials/second.html',
controller: 'second'
};
$routeProvider.when('content/second', route);
}
Main.config(['$routeProvider', router]);
Main.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
Main.controller('second', function($scope) {
$scope.list = [1,2,3];
});
partials simply make use of ngRepeat:
<header> First content </header>
<p ng-repeat="iter in list">
first
</p>
solved :
my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working .
shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .
the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .
Please check this code
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
Js file
var app = angular.module('Main', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'second.html',
controller: 'second'
});
}]);
app.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
app.controller('second', function($scope) {
$scope.list = [1,2,3];
});
first page HTML
<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>
here is your working code click
Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):
$routeProvider
.when('content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
});
If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors
Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second
your route configuration is not correct, you assume route function is execute for each and every link u click but its not.
so your route function should be like
function router($routeProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'partials/first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
}).
otherwise({
templateUrl: 'partials/default.html'
});
}
note that urls should be like <a href="#/content/first"> // note the slash after #
to match that the routes in route function should be like when('/content/first', { note the leading slash
here is the working Plunker
Define your Routes in routes.js
var route = angular.module('route', ['ngRoute']);
route.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/home", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/product", {
templateUrl: "views/product-info.html"
})
.otherwise({redirectTo :'/'});
});
Attach the router to your Main Module.
angular.module('myApp', ['route']);
Import both the scripts in your index.html
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");