I'm trying to create my first angularjs page. A small wishlist to my family.
My simplified html:
<body ng-controller="memberController">
<nav>
<div class="container">
<ul class="nav navbar-nav">
<li ng-repeat="member in members" ng-class="{'active': isActive(member)}">
<a ui-sref="member({memberId:member.pk})" ng-bind="member.name"></a>
</li>
</ul>
</div>
</nav>
<div ui-view></div>
My wish-list.html (simplified)
<ol class="breadcrumb">
<li><a ui-sref="home">Hjem</a></li>
<li class="active">{{member.name}}</li>
</ol>
And here is my app.js
'use strict';
var wishApp = angular.module('wishApp', [
'ui.router',
'memberController',
'memberService',
]);
wishApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: static_url('partials/index.html'),
})
.state('member', {
url: "/member/:memberId",
templateUrl: static_url('partials/wish-list.html'),
controller: 'WishFilterCtrl',
})
});
controllers.js
'use strict';
var memberController = angular.module('memberController', []);
memberController.controller('memberController', ['$scope', '$stateParams', 'Member', function($scope, $stateParams, Member) {
$scope.members = Member.query();
$scope.isActive = function(member){
if (member.pk == $stateParams.memberId)
$scope.member = member;
return member.pk == $stateParams.memberId;
};
}]);
services.js
var memberService = angular.module('memberService', ['ngResource']);
memberService.factory('Member', ['$resource', function($resource){
return $resource('/api/members/:memberId/', {memberId: '#pk'}, {
query: {method:'GET', isArray:true},
});
}]);
So my simple question is. Is this the right way to show member.name in breadcrumb or are there a more correct way to show this info inside the wishlist?
The member id is used to show wishes connected to a member. So should the call also return the member.name?
I hope this make sense or else please ask for further details.
Started working in angular 2, so i close this question.
Related
I have a problem with my code, I'm getting this error when trying to work with $http. Anyone had a problem like this in the past?
angular.js:14794 TypeError: http.get(...).than is not a function
at new <anonymous> ((index):57)
at Object.instantiate (angular.js:5112)
at angular.js:11083
at Object.link (angular-route.js:1209)
at angular.js:1383
at wa (angular.js:10611)
at q (angular.js:10000)
at f (angular.js:9240)
at angular.js:9105
at angular.js:9496 "<div ng-view="" class="ng-scope">"
this is my code
<body>
<nav>
<div class="nav-wrapper">
Logo
<ul class="left">
<li class="active">
CD
</li>
<li>
DVD
</li>
<li>
DVD-DL
</li>
</ul>
</div>
</nav>
<div ng-view></div>
<script>
var app = angular.module("diskManagment", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "discs.htm",
controller: "cd"
})
.when("/dvd", {
templateUrl: "discs.htm",
controller: "dvd"
})
.when("/dvddl", {
templateUrl: "discs.htm",
controller: "dvddl"
});
});
app.controller("cd", ['$scope', '$http', function(scope, http) {
http.get("discs.php?type=cd")
.than(function (response) {
scope.discs = response.data.discs;
});
}]);
app.controller("dvd", ['$scope', '$http', function ($scope, $http) {
$http.get("discs.php?type=dvd")
.than(function (response) {
scope.discs = response.data.discs;
});
}]);
app.controller("dvddl", ['$scope', '$http', function ($scope, $http) {
$http.get("discs.php?type=dvddl")
.than(function (response) {
scope.discs = response.data.discs;
});
}]);
</script>
</body>
I cant seem to find out what causing the problem, I tried every way I found that was supposed to work
I can really use some help, thanks!
I was mistaked when wrote .than instead of .then
I have some problem with binding when i use ui-router. I am trying to make the app modular and keep it clean and simple.
I have the following app.js
// main routing - index.html
var app = angular.module('mainApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'pages/main.html'
})
.state('cars', {
url: '/cars',
templateUrl: 'pages/Cars_model/main.html'
})
.state('cars.audi', {
url: '/audi',
templateUrl: 'pages/Cars_model/audi.html'
})
.state('cars.ford', {
url: '/ford',
templateUrl: 'pages/Cars_model/ford.html'
})
});
app.controller('indexController', function($scope, $location) {
$scope.isIndexPage = function() {
return $location.path() === '/';
}
});
app.controller('carsCtrl', function($scope, $location) {
if($location.path() === '/cars/audi')
{
$scope.pageHeader = "AUDI";
$scope.curentMenu = "Best Cars";
$scope.title = "Audi Specs";
}
if($location.path() === '/cars/ford')
{
$scope.pageHeader = "FORD";
$scope.curentMenu = "Best Cars";
$scope.title = "Ford Specs";
}
});
and the file where i want to use binding
<div class="container" ng-controller="carsCtrl">
<div class="page-header">
<h1>{{pageHeader}}</h1>
</div>
<!-- The first row -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sd-12">
<ol class="breadcrumb">
<li>Home</li>
<li>{{curentMenu}}</li>
<li class="active">{{pageHeader}}</li>
</ol>
</div>
</div>
</div>
The problem is when i load the page the binding work only once, for the second i have to refresh the page.
I am not sure if i used the corect logic
if($location.path() === '/cars/ford')
I think i found the solution
Using
ui-sref-opts="{reload: true}"
in the menu solve the problem
<a ui-sref="cars.audi" ui-sref-opts="{reload: true}">Audi</a>
Plunker
I trying to use mmenu menu http://mmenu.frebsite.nl/ with my angularJS base app.
ui-sref is working but ng-click is not working with mmenu link.
Can anyone help me, what wrong I am doing it.
Main HTML Page
<body ng-app="student">
</div>
<div class="header">menu</div>
<div class="content">
<div ui-view></div>
</div>
<nav id="menu">
<ul>
<li ><a ng-href="" ng-click="holidayInfo()">Holiday</a></li>
<li><a ui-sref="notices">Notices</a></li>
</ul>
</nav>
</div>
</body>
app.js
app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider','RestangularProvider',
function ($urlRouterProvider, $stateProvider, $locationProvider, RestangularProvider ) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home", {
url: "/",
templateUrl: 'home.html',
controller:'homeCtrl as vm',
resolve: {
currentyear: function (Restangular, $stateParams) {
return Restangular.one('CurrentACYear').get();
}
}
})
.state("notices", {
url: "/notices",
templateUrl: 'notices.html',
controller:'schoolNoticesCtrl as vm',
resolve: {
notciesList: function (Restangular, $stateParams) {
return Restangular.one('notices').get();
}
}
})
My holidayInfo() method is in homeCtrl controller.
When I do <nav id="menu" ng-controller="homeCtrl"> it throw error, not able to resolve currentyear .
You had # in the href of Holiday which is executing $urlRouter.otherwise code which is fallback URL.
It should be kept as blank
ng-href=""
Other thing would be you havent't had nav bar wrap with scope of controller where you wrote holidayInfo method. There you can have new controller for your navbar component & have holidayInfo method over there.
Markup
<nav id="menu" ng-controller="navbarCtrl">
<ul>
<li><a ng-href="#" ng-click="holidayInfo()">Holiday</a></li>
<li><a ui-sref="notices">Notices</a></li>
</ul>
</nav>
Code
app.controller('navbarCtrl', function(){
$scope.holidayInfo = function () {
console.log("i am trigeered ....")
};
})
Do update question with more info if you still found an issue.
i have no idea how to solve this Problem.
I have 4 Checkout Steps. Each Step has an Form to fullfill.
If Form is valid, the next Step in Navigation should be activated.
This is the Routing Script
"use strict";
var router = angular.module("router", ["ui.router"]);
router.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", "$httpProvider",
function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: true,
rewriteLinks: true
});
$stateProvider
.state("step1", {
url: "/step1",
controller: "Step1Controller",
templateUrl: "app/views/step1-partial.html"
})
.state("step2", {
url: "/step2",
controller: "Step2Controller",
templateUrl: "app/views/step2-partial.html"
})
.state("step3", {
url: "/step3",
controller: "Step3Controller",
templateUrl: "app/views/step3-partial.html"
})
.state("step4", {
url: "/step4",
controller: "Step4Controller",
templateUrl: "app/views/step4-partial.html"
});
$urlRouterProvider.otherwise("/step1");
}
]);
router.run(function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
and this is one of the Partials View
<section class="steps">
<ul class="clear-list">
<li class="active">Step1</li>
<li>Step2</i></li>
<li>Step3</li>
<li>Step4</li>
</ul>
</section>
<form name="registerForm" ng-cloak>
formfields...
</form>
<div class="step-footer">
Next >
</div>
can somebody help me out
In processData() function (which i am hoping you will we having in all three controllers) after successful processing of data you can do $location.path('/step2');
and so on for all the steps.
For activating the current section in which currently you are, you can have some common variable in all three controller and set the value of that variable like ($scope.currentStep = step1) respectively.
Example.
<section class="steps">
<ul class="clear-list">
<li ng-class="{active : currentStep=='step1'}">Step1</li>
<li ng-class="{active : currentStep=='step2'}">Step2</i></li>
<li ng-class="{active : currentStep=='step3'}">Step3</li>
<li ng-class="{active : currentStep=='step4'}">Step4</li>
</ul>
</section>
use ui-sref-active="active" instead of class
My template is loading but I get an error that the controller is undefined. The controller does exist in my sources exactly at the location defined. What is wrong with this code?
Error: [ng:areq] Argument '/Scripts/controllers/wizardNavigationCtrl.js' is not a function, got undefined
http://errors.angularjs.org/1.2.14/ng/areq?p0=%2FScripts%2Fcontrollers%2FwizardNavigationCtrl.js&p1=not%20aNaNunction%2C%20got%20undefined
Index.html (root page)
<div class="container">
<div ui-view></div>
</div>
wizardLayout.html
<div>
<ul class="nav nav-tabs">
<li ng-repeat="model in models" ng-class="active: model.active">
<a ui-sref=".model-{{model.name}}">model.name</a>
</li>
<li ng-class="navStep=='addnew' ? 'active' : ''">
<a ui-sref=".newmodel"><span class="glyphicon glyphicon-plus"></span></a>
</li>
<li><a ui-sref=".other">Other</a></li>
<li><a ui-sref=".customer">Customer Info</a></li>
<li><a ui-sref=".shipping">Shipping Info</a></li>
<li><a ui-sref=".review">Review</a></li>
</ul>
</div>
<div ui-view>
</div>
app.js:
'use strict';
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('wizard', {
url: '/',
templateUrl: 'Scripts/templates/wizardLayout.html',
controller: 'Scripts/controllers/wizardNavigationCtrl.js'
})
.state('wizard.newmodel', {
url: '/newmodel',
templateUrl: 'Scripts/templates/wizardModel.html',
controller: 'Scripts/controllers/wizardModelCtrl.js'
})
.state('wizard.other', {
url: '/other',
templateUrl: 'Scripts/templates/wizardOther.html',
controller: 'Scripts/controllers/wizardOtherCtrl.js'
})
.state('wizard.customer', {
url: '/customer',
templateUrl: 'Scripts/templates/wizardCustomer.html',
controller: 'Scripts/controllers/wizardCustomerCtrl.js'
})
.state('wizard.shipping', {
url: '/shipping',
templateUrl: 'Scripts/templates/wizardShipping.html',
controller: 'Scripts/controllers/wizardShippingCtrl.js'
})
.state('wizard.review', {
url: '/review',
templateUrl: 'Scripts/templates/wizardReview.html',
controller: 'Scripts/controllers/wizardReviewCtrl.js'
});
}]);
wizardNavigationCtrl.js
myApp.controller('wizardNavigationCtrl', ['wizardSvc', '$scope', function (wizardSvc, $scope) {
alert('navigation controller! ' + wizardSvc.quote.title);
$scope.navStep = 'addnew';
wizardSvc.init();
}])
The controller should be in the format MyControllerName not the name and path to the javascript file. That in mind, in order to use the controller the javascript must have been loaded by the browser already. This requires the use of a traditional script tag because angular won't find or load these scripts for you.
Taking a snippet from your code it becomes:
.state('wizard', {
url: '/',
templateUrl: 'Scripts/templates/wizardLayout.html',
controller: 'wizardNavigationCtrl'
})
And somewhere in the page you need:
<script src="Scripts/controllers/wizardNavigationCtrl.js" type="text/javascript"></script>
Hope that helps!