i am very new in angular and learning angular v1+. just come across a example which show how to load controller by routing when all controllers in same file.
code taken from https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
see the code details
// 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'
});
});
// 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.';
});
html
<!-- index.html -->
<body ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
<!-- home.html -->
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
<!-- about.html -->
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
</div>
<!-- contact.html -->
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
now my question is if about and contact controller reside in different module in different folder then how angular routing would load these modules when user click on links?
so please tell me how to instruct angular routing to load controllers in different module with path ?
please discuss with a small example. thanks
Related
I'm starting with a basic app with c# web api + AngularJS. I'm using AngularJS ngRoute for routing. The page is perfectly loaded, and the code in the secondary files is displayed correctly. The problem is with the file (or code) templated with ngRoute... here is my code...
my app.js:
var App = angular.module('App', ['ngRoute']);
// configure our routes
App.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'views/home.html'
})
.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
my Index.html:
<body class="hold-transition skin-blue sidebar-mini" ng-app>
<div class="wrapper">
<!-- Header -->
<header class="main-header" ng-include src="'views/common/header.html'"></header>
<!-- Menú Principal -->
<aside class="main-sidebar" ng-include src="'views/common/sidebar.html'"></aside>
<!-- Contenido de la página -->
<div class="content-wrapper" ng-view>
</div>
<!-- Footer -->
<footer class="main-footer" ng-include src="'views/common/footer.html'"></footer>
</div>
i wasn't passing the dependency injection for $routeProvider. I change it and then i change ng-app for ng-app="App" and start working fine. Thanks all!
What am I doing wrong? I've followed countless tutorials on Youtube/Google and yet it doesn't seem to be working.
I want to load games and when you click on one of them, it should give a detail view. This all worked fine in Angular only, but I wanted to try in Ionic for the animation.
Note: Following code is to display the list of games.
Index.html
<body ng-app="myApp">
<script id="list.html" type="text/ng-template">
<ion-nav-view></ion-nav-view>
</script>
</body>
Controller
var ctrl = angular.module('Controllers', []);
ctrl.controller('MainController', ['$scope', '$http', '$location', 'games', function($scope, $http, $location, games){
$scope.games = [];
$scope.games = games.all();
}]);
You can assume I get data in code above.
App config
app.config(['$stateProvider',function($stateProvider) {
$stateProvider
.state('list', {
url: "/",
templateUrl: 'templates/list.html',
controller: 'MainController'
})
}])
List.html
<ion-view view-title="Games">
<ion-refresher pulling-text="Refresh..." on-refresh="refresh()"></ion-refresher>
<ion-content>
<div class="game" ng-repeat="game in games.results" ng-click="checkDetail(game, $index)">
<!--<img ng-src="{{ game.image.screen_url }}" alt="{{ game.aliases }}" />-->
<h3>{{ game.name }}</h3>
</div>
</ion-content>
</ion-view>
Codepen
Here's a codepen I based it on
http://codepen.io/darrenahunter/pen/oDKid
You have to declare a ui-view to inject template from state.
Edit your index.html like that :
<body ng-app="myApp">
<div ui-view>
</div>
</body>
or
<body ng-app="myApp">
<ion-nav-view name="content"></ion-nav-view>
</body>
and edit your state like that
.state('statename', {
url: "/",
views: {
'content': {
templateUrl: 'yourTemplate.html',
controller: "yourCtrl"
}
}
}
that way you force to inject your view in that ion-nav-view.
The same way you can create
<div ui-view="content"></div>
I am working through the mean-machine tutorial and have come to a road block when using ng-view to inject pages into the main layout. I have configured the routes in app.routes.js, defined the controllers in app.js, as well as created the html files for each page. Both app.js and app.routes.js have been loaded into the index.html file. mainController is working fine, just not the ancillary controllers. Please see the code below. Any idea on what I am doing wrong?
public/views/index.html
<html>
<head>
<meta charset="utf-8">
<title>My Routing App!</title>
<!-- set the base path for angular routing -->
<base href="/">
<!-- CSS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body { padding-top:50px; }
</style>
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<!-- load our custom angular app files -->
<script src="js/app.js"></script>
<script src="js/app.routes.js"></script>
</head>
<body class="container" ng-app="routerApp" ng-controller="mainController as main">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<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>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<main>
<!-- angular templating will go here -->
<!-- this is where content will be injected -->
<div ng-view></div>
</main>
</body>
</html>
public/js/app.js
angular.module('routerApp', ['routerRoutes'])
// create the controllers
// this will be the controller for the ENTIRE site
.controller('mainController', function() {
var vm = this;
// create a bigMessage variable to display in our views
vm.bigMessage = 'A smooth sea never made a skilled sailor.';
})
// home page specific controller
.controller('homeController', function() {
var vm = this;
vm.message = 'This is the home page!';
})
// about page controller
.controller('aboutController', function() {
var vm = this;
vm.message = 'Look! I am an about page.';
})
// contact page controller
.controller('contactController', function() {
var vm = this;
vm.message = 'Contact us! JK. This is just a demo.';
});
public/js/app.routes.js
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateURL: 'views/pages/home.html',
controller: 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateURL: 'views/pages/about.html',
controller: 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateURL: 'views/pages/contact.html',
controller: 'contactController',
controllerAs: 'contact'
});
// set our app to have pretty URLS
$locationProvider.html5Mode(true);
});
public/views/pages/home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home.message }}</p>
</div>
public/views/pages/about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about.message }}</p>
</div>
public/views/pages/contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact.message }}</p>
</div>
Are you sure your templateURL properties have the right value? Try with public/views/pages/home.html or any full URL that shows up when you browse to your application in your browser.
See the documentation on the $routeProvider : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider.
There are some 3 links(Home, About, Contact) in the index.html file. On clicking them, I should be able to display new messages/html(home.html, contact.html, about.html) files as defined in script js. But that does not happen.
There are otherwise no errors while doing an "inspect element' in chrome.
The url on clicking on contact is :
file:///C:/Users/Sonali%20Sinha/Desktop/demo/omg/index.html#contact
The code files are as below.
index.html
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<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 id="main">
{{ message }}
<div ng-view></div>
</div>
</body>
</html>
script.js
scotchApp.config(function($routeProvider,$locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : '/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : '/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : '/contact.html',
controller : 'contactController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
// 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.';
});
home.html
<div>
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
contact.html
<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
about.html
<div>
<h1>About Page</h1>
<p>{{ message }}</p>
</div>
The directory structure is as below.
demo/omg/index.html
All files are inside omg.
Guys, I am stuck with this for a day now.:-(
I am just a day old in angularjs. Please be kind and help me out.
Thanks in advance! :-)
You need to do 2 things :
Run it behind an Apache as JB mentioned above.
Remove the locationProvider block, it worked for me.
You're serving the app from the file system (i.e. using a file:// URL), instead of service it from a web server (i.e. using an http:// URL). You can't do AJAX requests on file system URLs. And Angular routing needs to do AJAX requests to load the views.
I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project index file is loaded in browser that is working fine but when i click on nav bar links then about and contact page is not displayed it's remains on index.html.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
<!-- start menu -->
</head>
<body>
<div header-table></div>
<div class="content" ng-controller = "myAppCtrl">
<div class="container" >
<div ng-view></div>
</div>
</div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'code/index.html',
controller : 'myAppCtrl'
})
// route for the about page
.when('/about', {
templateUrl : 'code/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'code/contact.html',
controller : 'contactController'
});
});
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myAppCtrl.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myAppCtrl.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
any guide thanks.
Like some people allready mentioned, you should deffinitly read the docs and probably watch some tutorials. I'm trying to see what you are doing, but it's not clear to me.
But I think I see where it goes wrong in your thoughts:
You have 3 'templates' index.html, about.html and contact.html. In your config You use them in your routing. By watching your files my guess is that you are expecting that, depending on the route, these html-files will be loaded. Just like when redirecting to that page.
What you should do is make a index.html with the html You use on every page. this can be the <head></head> only, but can also contain your header with navigation and footer. Then you use <ng-view></ng-view> or <div ng-view></div> where you want the templates to load in your page. These templates don't need to contain the parts you allready defined in your index.html. You have only the content in it.
So, a simple example:
index.html
<html>
<head>
//loading your scripts etc.
</head>
<body>
<ng-view></ng-view>
</body>
</html>
Than, instead of creating a template called index.html, you make a template home.html with the content:
<div class="container">
<h1>My Home</h1>
</div>
Now the contentpart from your home.html will load in your index.html where you define de ng-view.
An other thing I noticed is the path you define in templateUrl. You define the location as code/about.html. You have to give it the path from your index.html (the main html) In your case that will just be templateUrl: 'about.html'.
I would suggest putting the different files in different folders. So, one for your templates, one for your js-files (probably a js-folder with another folder in it for your js-file with directives etc.).
I hope this will help you on your way. But deffinitly read the docs and watch some tutorials. It will help you a lot.