angularjs directive not working (strange issue) - javascript

This is my app.js code (main js)
var currentUserId;
window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile',
'myApp.Registermdl',
'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.createMap', 'ui.bootstrap',
'myApp.logout', 'myApp.viewCollege']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/login', { templateUrl: 'app/Login/login.html', controller: 'LoginCtrl' });
$routeProvider.when('/home', { templateUrl: 'app/Home/home.htm', controller: 'HomeCtrl' });
$routeProvider.when('/createuser', { templateUrl: 'app/CreateUser/createUser.html', controller: 'CreateUserCtrl' });
$routeProvider.when('/signup', { templateUrl: 'app/Register/register.html', controller: 'RegisterCtrl' });
$routeProvider.when('/logout', { templateUrl: 'app/Login/login.html', controller: 'LogoutCtrl' });
$routeProvider.when('/view-map', { templateUrl: 'app/ViewMap/viewmap.html', controller: 'ViewMapCtrl' });
$routeProvider.when('/create-map', { templateUrl: 'app/CreateMapAddress/create-mapaddress.html', controller: 'CreateMapAddressCtrl' });
$routeProvider.when('/view-college', { templateUrl: 'app/ViewColleges/viewcolleges.html', controller: 'ViewCollegeCtrl' });
$routeProvider.otherwise({ redirectTo: '/login' });
}]).directive("collegeAppMain", function ($location) {
return {
restrict: "A",
link: function (scope) {
scope.getClass = function (path) {
if ($location.path() == path) {
return "active"
} else {
return ""
}
}
}
};
});
This is my directive code
directive("collegeAppMain", function ($location) {
return {
restrict: "A",
link: function (scope) {
scope.getClass = function (path) {
if ($location.path() == path) {
return "active"
} else {
return ""
}
}
}
};
});
I have called this collegeAppMain directive in my index page
<body>
<nav class="navbar navbar-default nav-custom" **collegeAppMain** role="navigation"></nav>
.
.
.
.
.</body>
It is not working. But if i change the directive name collegeAppMain to "dfhsfksksdf"
then it's working. I want to work with this collegeAppMain name
I am confused with this. Please tell me it why? How can i solve this problem?
Why its working if i gave the directive name is 'dfhsfksksdf' and why it's not working if i gave the directive name is 'collegeAppMain '?

when naming a directive using camelCase, the directive should be called from HTML like this: camel-case.
in your case, html should look like this:
<nav college-app-main class="navbar navbar-default nav-custom" role="navigation"></nav>
take a look at this answer.
for farther information about directives you can look at this tutorial.
another thing to consider is re-formatiing the code.
$routeprovider uses 'method chaining', so you can write your code like this:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/Login/login.html',
controller: 'LoginCtrl' })
.when('/home', {
templateUrl: 'app/Home/home.htm',
controller: 'HomeCtrl' })
.otherwise({
templateUrl: 'some.html',
controller: 'Home2Ctrl'
})
});
it's alot easier on the eyes.
take a look at this short video tutorial by EggHead

Related

dynamic nested view with angular component

i have an angularjs app with components and i want to add a view as child of another view using ui.router. i honestly dont think that ui.router fully support component, this may happen in upcomping 1.0 version. But in the meanwhile is anything that i can do to use display view dynamically?
this is my $stateProvider (i've done my attempts)
$stateProvider
.state('home', {
url :'/home',
template :'<home></home>'
})
.state('projects', {
url:'/projects',
template: "<project-list></project-list>"
})
.state('projectDetails',{
url:'/:projectId',
template : '<project-detail projectDetails="projectDetails"></project-detail>'
, views :{
'chat':{
template : '<chat></chat>'
}
}
});
$urlRouterProvider.otherwise('home');
i have created a component in this way:
(function() {
'use strict';
function ChatController($scope, $element, $attrs, $firebaseArray) {
var ctrl = this;
console.log("it works");
}
angular.module('myapp').component('chat', {
templateUrl: '/app/component/project/chat.html',
controller: ChatController
});
})(window.angular);
and then i've added the view in projectDetails
<div ui-view="chat"></div>
My understanding of your requirement is that you have a component called 'Chat' which you want to load in the state 'project-details' as a nested/child view.
As you have already observed ui-router does not support this.
But this can be achieved by making your 'project-details' as a parent state and load other components included as a child state.
Plunker Demo
angular.module('app', [
'ui.router'
]).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
template: '<home></home>'
}).state('home.parts', {
url: '/',
views: {
'about-view#home': {
template: "<about></about>"
},
'chat-view#home': {
template: "<chat></chat>"
}
}
});
}).component('app', {
templateUrl: 'app.html'
}).component('home', {
templateUrl: 'home.html',
controller: homeController,
controllerAs: 'vm'
}).component('about', {
templateUrl: 'about.html',
controller: aboutController,
controllerAs: 'vm'
}).component('chat', {
templateUrl: 'chat.html',
controller: chatController,
controllerAs: 'vm'
});
function chatController() {
this.name = "chat";
}
function aboutController() {
this.name = "about";
}
function homeController() {
this.name = "home";
}
Hope this is what you wanted.Please do not add url to the parent state.Consider making it a abstract state.

Using $rootScope to change background image of body in angular

I am using routes and would like to change my background image when I am on a specific route. For some reason the background image does not change/is not reading the value of my rootScope. I make the value true in my controller for the route that needs the different background image. Anyone know what I am doing wrong here? Can I not use $rootScope in my routes to change the class of my body?
HTML:
<body ng-app="ciscoImaDashboardApp" dynamicBodyBg ng-controller="navCtrl" >
JS:
.directive('dynamicBodyBg', function($rootScope, $route){
return {
restrict: 'A',
link: function($scope, el){
$rootScope.$on('$routeChangeSuccess',
function() {
if ($route.current.locals.needToChange()){
el.css({background: url('images/background-bark#2x.jpg')});
}
else {
el.css({background: url('images/background#2x.jpg')});
}
}
);
}
}
});
Routes:
angular.module('ciscoImaDashboardApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl'
})
.when('/overall-results', {
templateUrl: 'views/overall.html',
controller: 'overallCtrl'
})
.when('/swim-lane-results', {
templateUrl: 'views/swim-lane.html',
controller: 'swimlaneCtrl'
})
.when('/key-exemplifiers', {
templateUrl: 'views/key-exemplifiers.html',
controller: 'petalCtrl'
})
.when('/key-exemplifiers/:exemplifier', {
templateUrl: 'views/single-exemplifier.html',
controller: 'keyCtrl',
resolve: {
needToChange: function(){
return true; //or false
}
}
})
.otherwise({
redirectTo: '/'
});
});
If you are using ng-route, you can do the following:
Add this directive to your body element.
app.directive('dynamicBodyBg', function($rootScope, $route){
return {
link: function($scope, el){
$rootScope.$on('$routeChangeSuccess',
function() {
//your router has changed and u can change the background
//add the logic here
if ($route.current.locals.needToChange){
el.css({background: url('//whatever background u want'});
}
else {
el.css({background: url('//restore'});
}
}
);
}
}
});
In your $routeProvider
$routeProvider
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl',
resolve: {
needToChange: function(){
return true; //or false
}
}
})
P.S Suggest you to switch to ui-router, which is much easier to understand and maintain.
Solved this by creating a rootScope and changing it for all the views.
$rootScope.backgroundImg = "url('../images/background#2x.jpg')";
And then using it in my view like this:
<body ng-app="ciscoImaDashboardApp" ng-controller="navCtrl" ng-style="
{'background-image': backgroundImg}" >

Parameters routes are not redirects to page 404

I ask them to help solve this problem, follows the code :
Controller
angular.module('tareasApp')
.controller('HumorCtrl', function ($scope, $route, $location) {
$scope.pageName = $route.current.params.pageName;
$scope.items =[
{
href:'/humor/smile-today',
img:'smile.jpg',
descricao:'Those Relaxing Sounds of Waves'
}
];
});
angular.module('tareasApp')
.controller('NewsCtrl', function ($scope, $route, $location) {
$scope.pageName = $route.current.params.pageName;
$scope.items =[
{
href:'/news/news-today',
img:'news.jpg',
descricao:'Those Relaxing Sounds of Waves'
}
];
});
App.js
myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
title: 'Home Page',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/humor/:pageName', {
templateUrl: 'views/wizard.html',
controller: 'HumorCtrl'
})
.when('/news/:pageName', {
templateUrl: 'views/wizard.html',
controller: 'NewsCtrl'
})
.otherwise({
redirectTo: '/'
});
});
When I type any route that does not exist right after the bar, eg:
domain.com/hhhoedr
returns to the start page .
The problem is in the sub-directory, which contains the $routeParams, typing a page that does not exist , eg:
domain.com/humor/hhhoedr
is not redirecting to index.html or to 404.html.
I would like to adapt this code, I found in another answer, to my app.
myApp.constant('EXISTING_PAGES', [
'page1',
'page2',
...
]);
resolve: {
exists: function ($location, $route) {
if (EXISTING_PAGES.indexOf($route.current.params.page) === -1) {
$location.path('/error/404');
}
return true;
}
}
.when('/error/404', {
templateUrl: '404.html'
})
.otherwise({
redirectTo: '/error/404'
});
how can I do it?
When you are typing any route e.g-domain.com/hhhoedr,It is returning to starting page because check you last part of your code,you are setting it like below.
.otherwise({
redirectTo: '/'
});
If you will set anything except from your all .when part it will simple redirect to the starting page.Try to set it for redirecting to any other page as per your requirement.
Ok,Now you can write it like below.
.otherwise({
redirectTo: '/here give your destination path(e.g-404.html...etc)'
});

Trying to use nested views in angularjs with ui-router get a blank page

My setup
app/learning/learning.js
angular.module('meanApp')
.config(function($stateProvider) {
$stateProvider
.state('learning',{
templateUrl: 'app/learning/learning.html',
url: '/learning',
controller: 'LearnCtrl',
views: {
'list': {
templateUrl: 'app/learning/learning.list.html',
controller: function($scope){ }
},
'magic': {
templateUrl: 'app/learning/learning.magic.html',
controller: function($scope){ }
}
}
});
});
app/learning/learning.html
<h1>Learning</h1>
<div ui-view="list"></div>
<div ui-view="magic"></div>
app/learning/learning.list.html
<p>A list</p>
app/learning/learning.magic.html
<h2>Magic</h2>
when I navigate to /learning I get a blank page, I'm not sure what I'm doing wrong so any help would be greatly appreciated.
You shouldn't load the base template inside state when there are nested ui-view,
Define the base template inside views.
Route Code
angular.module('meanApp')
.config(function($stateProvider) {
$stateProvider
.state('learning',{
url: '/learning',
views: {
'': {
templateUrl: 'app/learning/learning.html',
controller: 'LearnCtrl'
},
'list#learning': { //you missed state name here
templateUrl: 'app/learning/learning.list.html',
controller: function($scope){ }
},
'magic#learning': { //you missed state name here
templateUrl: 'app/learning/learning.magic.html',
controller: function($scope){ }
}
}
});
});
This could Help you, Thanks.
The problem was that I was trying to load the base template inside state and I missed out the state name as Pankaj said, so the solution is...
angular.module('meanApp')
.config(function($stateProvider) {
$stateProvider
.state('learning',{
url: '/learning',
views: {
'': {
templateUrl: 'app/learning/learning.html',
controller: 'LearnCtrl'
},
'list#learning': { //you missed state name here
templateUrl: 'app/learning/learning.list.html',
controller: function($scope){ }
},
'magic#learning': { //you missed state name here
templateUrl: 'app/learning/learning.magic.html',
controller: function($scope){ }
}
}
});
});

Using HTML5 pushstate on angular.js

I am trying to implement html5's pushstate instead of the # navigation used by Angularjs. I have tried searching google for an answer and also tried the angular irc chat room with no luck yet.
This is my controllers.js:
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
}
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
function greetCntr($scope, $window) {
$scope.greet = function() {
$("#modal").slideDown();
}
}
app.js
angular.module('phoneapp', []).
config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}])
Inject $locationProvider into your config, and set $locationProvider.html5Mode(true).
http://docs.angularjs.org/api/ng.$locationProvider
Simple example:
JS:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});
HTML:
Page 1 | Page 2

Categories

Resources