I have a very simple configuration that is not working. The ui view is not rendering the template.
HTML:
<ul>
<li>Home</li>
<li>Register</li>
</ul>
<div ui-view></div>
<script src="/src/client/app/app.js"></script>
<script src="/src/client/app/config.js"></script>
AppJS
(function () {
'use strict';
angular.module('barmehealth', ['ui.router'])
.controller('RegisterCtrl', function($scope) {
});
}());
ConfigJS
(function () {
'use strict';
var core = angular.module('barmehealth');
core.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/views/register.html',
controller: 'RegisterCtrl'
});
});
}());
When I go to the route by clicking on the link to register, the ui view renders the entire html page with the view tag and not the template which is given in the state.
https://www.dropbox.com/s/brm99i3thsw30h6/Screen%20Shot%202016-03-29%20at%209.15.14%20AM.png?dl=0
I had the path wrong in the templateUrl. It should have been
templateUrl: '/app/views/register.html'
Does anyone know if it is a default behavior for the view tag to load the surrounding html?
Related
I am currently studying AngularJS and as I am learning I am trying to implement.
Currently, I am studying the routeProvider aspect. I have tried to incude what I have learned but for some reason the route provider isnt loading the required templateUrl.
Please see below.
<body ng-app="myapp">
<ul>
<li>HOME</li>
<li>SECOND</li>
</ul>
<div ng-view></div>
<script type="text/javascript">
var myapp = angular.module("myapp", ['ngRoute']);
myapp.config(function ($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'maincontroller'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'maincontroller'
})
});
myapp.controller("maincontroller", ["$scope", function($scope){
$scope.title1 = "main page";
$scope.title2 = "second page";
}])
</script>
When I click on the second li element to try and load the second page, nothing happens. Is anyone able to identify what I am doing wrong here?
I am following the course: "Learn & Understand AngularJS" on Udemy.
You can use routerLink="/second" routerLinkActive = "active"
Like this.
<li><a routerLink="/second" routerLinkActive = "active">SECOND</a></li>
You also need to have a routes defined in app.component.ts.
I seem to be losing scope on my angular controller when I am trying to abstract my Angularjs modules.
It works fine if i use my app module, but as soon as I change the home.js module to app.layout, $scope no longer works.
Can anybody spot an issue here?
_Layout.html (left out includes and head)
<body class="docs-body" ng-app="app">
<div layout="column" ng-cloak>
<section layout="row" flex>
<div ng-include="'App/layout/sidenav.html'"></div>
<md-content class="_md layout-column flex" layout="column" flex="">
<div ng-include="'App/layout/toolbar.html'"></div>
<div class="container body-content">
#RenderBody()
</div>
</md-content>
</section>
</div>
</body>
#RenderBody() brings up Index.html
<!-- this is where content will be injected -->
<div ng-view></div>
Home.html
<div>
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
My app.js
angular.
.module('app', [
'app.core',
'app.layout',
]);
})();
layout.module.js
(function () {
'use strict';
angular.module('app.layout', [
'ngAnimate',
'ngMaterial',
'ngAria'
]);
})();
core.module.js
(function () {
'use strict';
angular.module('app.core', [
'ngRoute'
]);
})();
and route.js:
angular.module('app.core')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'App/layout/home.html',
controller: 'home'
});// End routeprovider
})// end config
And Finally the culprit... Home.js
(function () {
'use strict';
console.log('registering controller home before Angular');
angular
.module('app.layout')
.controller('home', home);
home.$inject = ['$scope'];
function home($scope) {
console.log('registering controller home');
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
}
})();
Now, When i have
.module('app);
.controller('home', home);
on home.js, the $scope.message displays
'Everyone come and see how good I look!'
but if i have
.module('app.layout')
.controller('home', home);
it displays
{{message}}
I know I'm losing scope somehow here, but I cant figure out how to fix it! Do I need to declare the controller again outside of the Router?
I think Angular not able to get your home controller. You should inject app.layout in app.core module.
angular.module('app.core', ['app.layout'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'App/layout/home.html',
controller: 'home'
});// End routeprovider
})// end config
angular.
.module('app.layout',[]).controller();
The solution was rather frustrating. Using Visual Studio's Bundle config, It was adding the home.js file in before it compiled the module files. In doing so, when it tried to build and register the controller, It couldn't find the module. solution was to build all modules first then build controllers by specifying build order in the bundle config.
I want to create such a schema:
DOM schema
Navbar state must be always inserted, it have our template and controller.
Content state must insert templates and controllers depending on URL path. Example:
mysite.com/ inserts main.html and mainCtrl.js into Content state.
mysite.com/articles inserts articles.html and articlesCtrl.js into Content state.
My actual try:
//app.js
var app = angular.module('myApp', [
'ui.router',
'ngCookies',
'myApp.content',
'myApp.main',
'myApp.navbar',
'myApp.articles',
]);
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
views: {
'navbar': {
templateUrl: 'templates/navbar.html',
controller: 'navbarCtrl'
},
'content': {
templateUrl: 'templates/content.html',
controller: 'contentCtrl'
}
}
})
//contentCtrl.js
angular.module('myApp.content', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('content.main', {
url: '/',
views: 'templates/content/main.html',
controller: 'mainCtrl'
})
.state('content.articles', {
url: '/articles',
views: 'templates/content/articles.html',
controller: 'articlesCtrl'
}
}])
.controller('contentCtrl', ['$scope', function ($scope) {
}
]);
//index.html
<body ng-app='myApp'>
<div ui-view="navbar"></div>
<div ui-view="content"></div>
</body>
//content.html
<h1>Content template</h1>
<ui-view></ui-view>
I see Navbar and Content states, but main and articles don't load into Content state.
How to create this kind of schema?
If the navigation must always be present in the page then you can do something like:
<body ng-app='myApp'>
<div ng-include="templates/navbar.html"></div>
<div ng-include="templates/content.html"></div>
</body>
Next, in your navbar.html template, include the controller directly from the view, so you won't need a special state for it:
<div ng-controller="navbarCtrl">
<!-- THE ACTUAL NAVIGATION HTML -->
</div>
Now you should be able to manage only the "real" states of the application and you don't need the content. prefix before the inner states, and in content.html you already have the <ui-view></ui-view> container for loading the actual states.
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 have two html pages which are named main.html and detail.html. When click the link button in main,i wanna open detail page for details.
Main.html:
<body ng-app="MyApp" ng-controller="mainController">
<div data-role="page" data-theme="b">
<a ng-href="detail.html"></a>
</div>
</body>
detail.html:
<div data-role="page" data-theme="b" ng-controller="DetailContoller">
<button>{{a}}</button></div>
Contoller:
MyApp.controller("mainController", function ($scope, $http, OranService, $location) {
$scope.a = 5;
$scope.items = [];});
MyApp.controller('DetailController', function ($scope, OranService) {
$scope.a = 1;});
When Click the link button in the main page, i see only a button which text {{a}}, and my url:'localhost/Main.html'. I dont want use target=_self vs. if i use ,when return click button press, main page will reload.
Do you have any suggestion?
Thanks!
Looks like you're mixing jQuery Mobile and Angular notation.
To implement navigation in Angular you can use the core Angular service $routeProvider. You have to include the ng-route module for this.
Here's an example of how to config this on your module:
angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
templateUrl: 'page2.html',
controller: 'Page2Ctrl'
})
.otherwise({
redirectTo: '/page1'
});
}]);
Now in your html, use the directive ng-view to specify the tag that should contain the template.
<body ng-app="app">
<div ng-view>
</div>
</body>