I'm new to AngularJS and trying to make a web app.
I was studying for directives from CodeAcademy and for my application decided to make a directive navbar, so every time I need it, I can call it.
But the problem is, it doesn't show in the index.html. I'm using grid in my index.html
Also I would like to know, if there is a better way in navbarCtrl.js to make it like
rest: {'About','Contact','Resources'} instead of writing them one by one.
Many thanks
navInfo.html
<link rel="stylesheet" type="text/css" href="/css/navbar.css" />
<header>
<div class="nav-placeholder">
<img src="/img/letter-y.png" ng-src="{{info.icon}}" />
<i class="menu-toggle-btn"></i>
<nav class="navigation-menu">
<a class="title" href="#">{{info.title}}</a>
<a class="rest" href="#">{{info.rest}}</a>
<a class="rest" href="#">{{info.rest}}</a>
<a class="rest" href="#">{{info.rest}}</a>
</nav>
</div>
</header>
navbarCtrl.js
var app = angular.module('nav', []);
app.controller('navbarCtrl', ['$scope', function($scope) {
$scope.navs = [
{
icon: '/img/letter-y.png',
title: 'Yedy',
rest: 'About',
rest: 'Contact',
rest: 'Resources'
}
];
}]);
navbarDirective.js
app.directive('navInfo', function(){
return{
restrict: 'E',
scope:{
info:'='
},
templateUrl: 'src/js/directives/navInfo.html'
};
})
index.html
<body ng-app="AppYedy">
<!-- Navbar -->
<div class="header" ng-controller="navbarCtrl">
<div ng-repeat="nav in navs">
<nav-info info="nav"></nav-info>
</div>
</div>
Related
i have a weird bug in my angular app where the data in my ng-repeat is not displaying but if i refresh the page and navigate to my home page it quickly flickers into view then disappears, im not sure why this is happening can someone help me out?
thanks in advance
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
// characters page that will use the CharactersController
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'CharactersController'
});
$locationProvider.html5Mode(true);
}]);
CharactersCtrl.js
angular.module('CharactersCtrl', []).controller('CharactersController', function($scope) {
$scope.init = function(){
$scope.getCharacters();
}
$scope.getCharacters = function(){
$.ajax({
url:'https://gateway.marvel.com/v1/public/characters?apikey=APIKEY',
success:function(response){
$scope.characters = response.data.results;
console.log($scope.characters);
},
fail:function(){
}
});
}
$scope.init();
});
characters.js
<div>
<div class="text-center">
<h1>Characters</h1>
</div>
<section id="character-section" class="row">
<figure class="columns small-3" ng-repeat="hero in characters">
<!-- <img ng-src="{{hero.thumbnail.path}}" alt="{{hero.name}}-image"> -->
<figcaption>
{{hero.name}}
</figcaption>
</figure>
</section>
</div>
index.html
<body ng-app="marvelApp">
<!-- HEADER -->
<header>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="/">Stencil: Node and Angular</a>
</div>
<!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
<ul class="nav navbar-nav">
<li>characters</li>
</ul>
</nav>
</header>
<!-- ANGULAR DYNAMIC CONTENT -->
<main ng-view ></main>
</body>
app.js
angular.module('marvelApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'CharactersCtrl', 'CharactersService']);
You are using jQuery ajax. Angular does not automatically update variable when modified outside the Angular scope (in this case, $scope.characters is modified using jquery ajax);
I sugges you use the $http service provided by angular for making ajax calls.
But if you insist in using jquery ajax, you can wrap this code $scope.characters = response.data.results; with
`$scope.$apply(function(){
})`
Result:
$scope.$apply(function(){
$scope.characters = response.data.results;
})
Here is the highlevel skeleton of my Angular SPA. My application is about college degree offerings. In that engineering page has a separate left nav which is currently built on ng-switch which i want to convert as route. How do i do that just using angular's native routing angular-route.js?
**app.js**
(function(){
var app=angular.module("myCollege",['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl:"app/views/home.html",
controller:"homeController",
}
.when('/engg', {
templateUrl:"app/views/engineering.html",
controller:"engineeringController",
})
.when('/med', {
templateUrl:"app/views/medical.html",
controller:"medicalController",
})
}]);
I have left nav in engineering.html using ng-switch which i want to
convert as sub-route of the application.This left nav of engineering
page is not inside of ngView. How do i acheive this using angular's
native ngRoute/angular-route?
**engineering.html**
<div nav ng-switch on="pagename()">
<div ng-switch-when="Civil Engineering">
<div civil-directive> </div>
</div>
<div ng-switch-when="Computer Engineering">
<div computer-directive> </div>
</div>
<div ng-switch-when="Nano Engineering">
<div nano-directive> </div>
</div>
<div ng-switch-when="Electrical Engineering">
<div electrical-directive> </div>
</div>
</div>
EngineeringController.js
(function() {
var app =angular.module("collegeApp");
var engineeringController= functino($scope,$rootscope,$location)
{
$scope.pagename = function() {
return $location.path();
};
app.controller("engineeringController",['$scope','$rootScope','$location',engineeringController])
}());
The above logic is not working for me. Can someone tell me where i am doing the wrong?
Not a good practice but here's what you want to do if you want to use ng-switch:
In your html, as you write for example:
<!-- don't forget to reference your app and your controller -->
<button ng-click="goTo('/page1')">Go to page 1</button>
<button ng-click="goTo('/page2')">Go to page 2</button>
<div nav ng-switch on="pagename()">
<div ng-switch-when="'/page1'"></div>
<div ng-switch-when="'/page2'"></div>
</div>
<div ng-view> </div>
in js
Config your routes
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'views/page1.html'
}).
when('/page2', {
templateUrl: 'views/page2.html'
}).
otherwise({
redirectTo: '/'
});
}])
and add the following in your controller:
$scope.pagename = function() { return $location.path(); };
$scope.goTo = function(page){
$location.path(page);
}
In the html above, ng-switch will use the $location.path() variable to know which view to display.
As I said this is not a good practice, because your controller isn't suppose to deal with routes.
when user clicks on the person it calls a form (form.html) using ui-router logic defined in app.js. I have 2 type of drop-down boxes, (1) using select tag and (2) using md-select tag. Pages works fine until i click on 2nd dropdown, which doesn't open the dropdown option window instead it freezes the page. I added code here in plunker however page routing doesn't work in plunker but you can reference the code.
index.html
<body ng-app="myApp">
<div class="col-sm-3 sidenav">
<div class="well"> <!-- container to hold status bar and form -->
<nav class="navbar navbar-default navbar-custom">
<a style="font-size:2.5em;position: absolute; left: 50%;" ui-sref="form"><span class="glyphicon glyphicon-user fa-5x" id="Icon"></span></a>
</nav>
<div class="column-nav-form" ui-view="formColumn" > <!--holds the form -->
</div>
</div>
</div>
</body>
form.html
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Normal DropDown </h4>
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>I have three elements in my list, you should be able to pick whichever you like</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Material DropDown </h4>
<md-select onclick='console.log("clicked")' ng-model="selectedFilter" placeholder="Select a filter"> <md-select-label>{{ selectedFilter.name }}</md-select-label>
<md-option ng-value="opt" ng-repeat="opt in filters">{{ opt.name }}</md-option>
</md-select>
</div>
</body>
app.js
var myApp = angular.module('myApp', [ 'ngAnimate', 'ngAria', 'ui.bootstrap', 'ngMaterial', 'ngMessages', 'ui.router' ]);
//routing
angular.module('myApp').config(function ($stateProvider){
$stateProvider
.state('form', {
url:"/form",
views: {
"listColumn": {
},
"formColumn": {
templateUrl: "/form.html"
}
}
})
});
//dropdown
myApp.controller('myCtrl', function($scope) {
//log
console.log($scope.names);
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.filters = [
{
value: 'mine',
name: 'Assigned to me'
},
{
value: 'undefined',
name: 'Unassigned'
},
{
value: 'all',
name: 'All Tickets'
},
{
value: 'new',
name: 'New Tickets'
}
];
//log
console.log($scope.filters);
console.log($scope.selectedFilter);
});
http://plnkr.co/edit/SB7MUM44Ly01aWyL5M28?p=preview
View upon clicking person icon
Note: Dropdown for md-select doesn't load.
Thanks in advance
Changed .css and .js version to have the same and it fixed it.
angular-material.js ( v 1.0.6 )
angular-material.css ( v 1.0.6 )
Links:
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>-->
Does anyone know where I am going wrong? I am trying to load up a new view on a section of the page in AngularJS.
I have the following code within sidebar.html:
<ul>
<li><a ui-sref="MainPage({themeName:'theme1'})">Theme 1</a></li>
<li><a ui-sref="MainPage({themeName:'theme2'})">Theme 2</a></li>
</ul>
Then my module.js file which contains all my routes looks like this:
var main = {
name: "MainPage",
url: "/:themeName",
views: {
"mainContent": {
controller: "MainPageController",
templateUrl: function($stateParams){
var url = 'modules/main/template/' + $stateParams.themeName + '/home.html';
console.log(url);
return url;
},
},
"sidebar":{
templateUrl: "modules/main/template/sidebar.html",
controller: "SidebarController"
}
}
};
$stateProvider.state(main);
When I look at the console I can see that the urlbeing returned is correct but my view isn't updated on the screen.
Would anyone be able to point out where I'm going wrong, I'm not seeing any errors in my console and the application is loading fine.
Any help is much appreciated
The views I'm trying to load reside in modules/main/template/theme1/home.html and modules/main/template/theme2/home.html
the HTML for these views are as follows:
/theme1/home.html
<h1>This is theme 1</h1>
/theme2/home.html
<h1>This is theme 2</h1>
This is where I am using ui-view:
<body>
<!-- SIDEBAR -->
<div id="sidebar" class="col-md-2 animated fadeIn" ui-view="sidebar" ng-cloak>
<div ng-include="modules/main/template/sidebar.html"></div>
</div>
<!-- HEADER -->
<div id="header" class='col-md-10'>
<img src='assets/images/logo.png' alt='' width='270' />
<ul class="breadcrumb">
<li class="active">{{ 'MAIN.NAVIGATION.LINK1' | translate }}</li>
<li>{{ 'MAIN.NAVIGATION.LINK2' | translate }}</li>
<li><a>{{ 'MAIN.NAVIGATION.LINK3' | translate }}</a></li>
</ul>
</div>
<!-- MAIN CONTENT -->
<div id="main-container" class="col-md-10 animated fadeIn" ui-view="mainContent" ng-cloak></div>
<div id="footer" class="col-md-12"><p>This is a test site</p></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="lib/all.js"></script>
<script src="modules/app.js"></script>
</body>
Ok, so we've established that it looks like a routing problem on NodeJS. I am using gulpJS to start up my server like this:
gulp.task('server', function() {
gulp.src([DIRDEST])
.pipe(webserver({
fallback : 'index.html',
livereload : false,
open : false,
directoryListing: {
enable: true,
path: 'target/index.html'
}
}));
});
Make sure you have defined ui-view where you want to render the template:
<div ui-view="mainContent"></div>
Update
I guess, you should use the template instead of templateUrl:
template: function($stateParams){
var url = 'modules/main/template/' + $stateParams.themeName + '/home.html';
console.log(url);
return url;
}
Tip
Also, if you want to re-execute your MainPageController on view change (since both the states are same, just the parameter is changing) then you have to use ui-sref-opts:
<ul>
<li><a ui-sref="MainPage({themeName:'theme1'})" ui-sref-opts="{reload: true}">Theme 1</a></li>
<li><a ui-sref="MainPage({themeName:'theme2'})" ui-sref-opts="{reload: true}">Theme 2</a></li>
</ul>
So, i have this main div, which wrapper the body code:
<main class="main">
</main>
And for which page i have a modifier with the name of the page:
Error page:
<main class="main main--error">
</main>
Events page:
<main class="main main--events">
</main>
Bookings page:
<main class="main main--bookings">
</main>
The main is always in the layout.html, because it will always be present on every page. How can i dynamically insert the class correspondent?
Should i create a MainController just for that? It has some clever way to do this without having to create a controller for just that?
UPDATE --
This is my layout.html:
<main class="main">
<section class="navbar" ng-controller="NavbarCtrl" ng-hide="pageName('Erro')">
<div class="navbar__container">
<div class="navbar__header">
<button class="navbar__toggle navbar__toggle--dashboard" data-sidebar-to="true">
<span class="navbar__icon-bar"></span>
<span class="navbar__icon-bar"></span>
<span class="navbar__icon-bar"></span>
</button>
<form class="navbar__form navbar__form--dashboard" role="search">
<input
class="navbar__search hide--mobile"
type="text" placeholder="Procure por algo...">
</form>
</div>
<ul class="navbar__list">
<li class="navbar__item">
<a class="navbar__link" href="#" title="logout">
<i class="icon icon__sign-out"></i>
<span class="hide--mobile"> Sair </span>
</a>
</li>
</ul>
</div>
</section>
<div
class="breadcrumb"
ng-controller="BreadcrumbCtrl"
ng-hide="pageName('Painel') || pageName('Erro')">
<div class="breadcrumb__container">
<h2 class="breadcrumb__title"> {{ $state.current.name }} </h2>
<ol class="breadcrumb__list">
<li class="breadcrumb__item breadcrumb__item--root"> Painel </li>
<li class="breadcrumb__item"> {{ $state.current.name }} </li>
</ol>
</div>
</div>
<div ui-view></div>
</main>
In the div with the ui-view, the Angular will append my pages, i have 3: error.tmpl.html, events.tmpl.html and bookings.tmpl.html
My generic app.js, where i register the angular module in the routes:
'use strict';
var adminApp = function($stateProvider, $urlRouterProvider) {
/*
* Booking Route
*
*/
var BookingCtrl = {
url: '/',
templateUrl: '/admin/booking/booking.tmpl.html',
controller: 'BookingCtrl'
};
/*
* Event Route
*
*/
var EventCtrl = {
url: '/eventos',
templateUrl: '/admin/event/event.tmpl.html',
controller: 'EventCtrl'
};
/*
* Error Route
*
*/
var ErrorCtrl = {
url: '/erro',
templateUrl: '/admin/error/505.tmpl.html',
controller: 'ErrorCtrl'
};
/*
* Register the states
*
*/
$stateProvider
.state('Bookings', BookingsCtrl)
.state('Eventos', EventCtrl)
.state('Error', ErrorCtrl);
$urlRouterProvider.otherwise('/');
};
angular.module('adminApp', [
'ui.router'
]).config(adminApp);
In my html templates i have this tiny html, which will be append in the ui-view.
The problem is that i need change the , if i access the error page, i need add the class 'main--error', if i access the events page, i need add the class 'main--events' and if i access the bookings page, i need add the class 'main--bookings'
It is conventional to reserve custom elements and attributes to angular directives. The directive will automatically add main class to top-level <main> and main main--statename to the elements belonging to view templates.
app.directive('main', function () {
return {
link: function (scope, element, attrs) {
var view = element.inheritedData('$uiView');
element.addClass('main');
if (!view) return;
element.addClass('main--' + view.state.name.toLowerCase());
}
};
});
Though it looks overengineered to me, there's nothing wrong with writing some classes by hand. If there's too much work with that maybe it is better to change the way the styles are organized.
Looked like directive 'main' will be inside other controllers, so the ng-class variable would be placed there.
In your Main Bookings controller:
$scope.class.name = 'main--bookings';
In your HTML
<main class="main" ng-class="class.name"></main>