Hi I have created a angularjs+webix project wherein I will be adding CRUD operations.
I have a app.js file where I put the routing:
var app = angular.module('app', [ "webix", "ui.router" ]);
app.config(function($stateProvider) {
$stateProvider
.state("/create", {
templateUrl : "/app/views/CreateTemplate.html",
controller : 'CreateController'
})
.state("/update", {
templateUrl : "/app/views/UpdateTemplate.html",
controller : 'UpdateController'
})
.state("/delete", {
templateUrl : "/app/views/DeleteTemplate.html",
controller : 'DeleteController'
})
});
My index.html file below:
<body ng-app="app">
<div class="container">
<div class="sidenav">
<a ui-sref="create">Create</a>
<a ui-sref="update">Update</a>
<a ui-sref="delete">Delete</a>
</div>
</div>
</body>
My index file contains a navbar. Whenever I click on either Create or Update it should show that particular view i.e. If I click on Create It should load Create view. But in doing so I am unsuccessful.
Related
I am trying to create a SPA using angular ui-router with MVC. I am facing three issues.
1.The controllers OfferController.js and OfferCustomizationController.js are not registering.
2.I am getting the errors ' No reference point given for path '.offer', No reference point given for path '.customizations'.
3. Main view is rendering thrice.
I have no clue what am i missing. Please help.
I have included the following files in my Layout.cshtml:
<script src="#Links.Scripts.angular_min_js"></script>
<script src="#Links.Scripts.ProductCatalog.app_js"></script>
<script src="#Links.Scripts.ProductCatalog.service_js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
I have made two views. Offers And OfferCustomizations. And a main view. Following is my code for the main view:
<div class="inside-data-div" ng-app="ProductCatalog">
#*<div ui-view></div>*#
<div class="col-lg-12">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h2>Create Offer</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".offer"><span>1</span> Offer Details</a>
<a ui-sref-active="active" ui-sref=".customizations"><span>2</span> Offer Customizations</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="SaveForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre>
{{ formData }}
</pre>
</div>
</div>
</div>
</div>
Following is my code of app js:
var productCatalogApp = angular.module('ProductCatalog', ['ui.router']);
productCatalogApp.value('appName', 'Product Catalog');
productCatalogApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('wizard', {
url: '/wizard',
templateUrl: 'WizardSubForm',
controller: 'WizardMainController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('wizard.offer', {
url: '/offer',
templateUrl: 'OfferForm',
controller: 'OfferCtrlr'
})
// url will be /form/interests
.state('wizard.customizations', {
url: '/customizations',
templateUrl: 'OfferCustomizations',
controller: 'CustomizationCtrlr'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/wizard/offer');
});
productCatalogApp.controller('WizardMainController', function ($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.SaveForm = function () {
alert('awesome!');
$scope.formData = { "Offer": $scope.offer, QuestionGroups: $scope.QuestionGroups }
};
});
This is how i'm registering my controllers. Below is the one for offercontroller.
var app = angular.module('ProductCatalog.controllers', []);
app.controller('OfferCtrlr', function ($scope, $http, $modal) {
});
Any help will be appreciated.
First off I am new to angular and I am inheriting this project. This seems like it should be deathly easy to say if the state is this show this, but I keep failing :]
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('page1', {
url: '/page1',
data: etc..................
},
.state('page1.nest', {
url: '/page1/nest',
data: etc..................
},
.state('page2', {
url: '/page2',
data: etc..................
},
Each page has it's own controller. page1 and page1 nest share the same templateUrl: 'scripts/app/page.html'. The div below lives on the page.html.
How do I simple say...
<div>
<span ng-show="if state == page1">Page 1</span>
<span ng-show="if state == page1/nest">Page 1 Nest</span>
</div>
<div>
Same Content on both here
</div>
I think it has something to do with $stateParams needing to be exposed to the scope in the controller?
You'll want to use the $state service provided by UI-Router
Check the documentation out here.
You'll do something like
In your controller. Inject $state then set it to a scope variable
$scope.state = $state
Then you can do something like this.
<span ng-show="state.is('page1')">Page 1</span>
Alternatively obviously you can use a function in your controller.
<span ng-if="inState('page1')">Page 1</span>
In controller
$scope.inState = function(state){
return $state.is(state);
}
Let's start first by formatting your code a little better and closing parens where they should be closed.
angular.module('myApp')
.config(function($stateProvider) {
$stateProvider
.state('page1', {
url: '/page1',
template: 'templates/page1.html',
data: etc..................
}),
.state('page1.nest', {
url: '/page1/nest',
template: 'templates/page1.nest.html',
data: etc..................
}),
.state('page2', {
url: '/page2',
template: 'templates/page2.html',
data: etc..................
});
Typically you would have these various templates somewhere in your project structure like
/app
/templates
Then you have your index page...
<html ng-app>
<body>
<div ng-controller="myController">
<div ui-view></div> <!-- this is where the page1 or page2 state gets loaded -->
</div>
</body>
</html>
Then in your page1 or page2 html files
<div>
... content goes here ...
<div ui-view></div> <!-- nested content will go in here -->
</div>
Then in your page1.nest.html
<div>
... all your nested content goes here
</div>
I am trying to make a simple project where i want to populate the section with ng-view directive and i keep getting the following error:
I also included in index.html the angular files:
1-angular min js
2-angular-route min js
3-angular-resource min js
Error: $injector:modulerr Module Error Failed to instantiate module
booksInventoryApp due to: Error: [$injector:modulerr]
How can i fix this?
My code is:
index.html
<!DOCTYPE html>
<html ng-app="booksInventoryApp">
<body>
<section ng-view></section>
<script src="js/index.js"></script>
</body>
</html>
index.js
var app = angular.module('booksInventoryApp', ['booksInventoryApp.bsm','booksInventoryApp.allBooks']);
//route provider
app.config(['$routeProvider', function($routeProvider){
$routeProvider
// route for the index page
.when('/', {
templateUrl : '../allBooks.html',
controller : 'booksCtrl'
})
// route for the best selling month page
.when('/bsm/:id', {
templateUrl : 'bsm.html',
controller : 'bsmCtrl'
})
// route for the root
.otherwise({
redirectTo : '/'
});
}]);
bsm.js
var app = angular.module('booksInventoryApp.bsm', []);
app.controller('bsmCtrl', function($scope) {
$scope.book = "Bla Bla";
});
bsm.html
<section class="container">
{{book}}
</section>
allBooks.js
var app = angular.module('booksInventoryApp.allBooks', []);
// controllers
app.controller('booksCtrl', function($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
.success(function(data) {
$scope.data = data;
});
});
allBooks.html
<section class="row">
<section class="col-sm-6 col-md-2" ng-repeat="book in data.books">
<section class="thumbnail">
<img ng-src="{{book.url}}">
<section class="caption">
<h3>{{book.name}}</h3>
<p>Author: {{book.author}}</p>
<p>ID: <span class="badge">{{book.id}}</span></p>
<p>Available: <span class="badge">{{book.amount}}</span></p>
<p>Price: <span class="badge">${{book.price}}</span></p>
<p><a ng-src="#/bsm/{{book.id}}"><button class="btn btn-info">Best selling month</button></a></p>
</section>
</section>
</section>
</section>
You need to add ngRoute module in your app and also the script reference of the angular-route.min.js write after the angular.js, Also you need to add bsm.js and allBooks.js in your html after above two mentioned file has loaded.
Code
var app = angular.module('booksInventoryApp', [
'booksInventoryApp.bsm',
'booksInventoryApp.allBooks',
'ngRoute'
]);
Note
Both the version of angular.js & angular.route.js should be the
same otherwise it will show some wierd issue. Preferred version is 1.3.15
In your index.html page you not included bsm.js and allBooks.js files which contains the required dependencies of your app.
Since you have specified the dependency of 'booksInventoryApp.bsm','booksInventoryApp.allBooks' in your app angular is not able to find those modules and hence you are getting that error.
Also you need to include angular route script reference and ngRoute in your dependencies because you are using angular routing in your app.
var app = angular.module('booksInventoryApp', ['ngRoute', 'booksInventoryApp.bsm', 'booksInventoryApp.allBooks']);
I'm new to angular and following this tutorial:
https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router
but i'm injecting this module into another existing module.
However, I keep getting a "could not resolve states" error - I'm not sure why but suspect its either a routes issue and I'm being dumb, or otherwise its a nested views issue (note nesting of ui-view in index.html, and again in home.html).
using angular ui version 0.2.13
angular version 1.3.14
Please help!!
Below is the relevant code:
structure:
home.html
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre>
{{ formData }}
</pre>
index.html
<body> blah blah
<div ui-view></div>
<script src="app.js"></script>
<script src="javascripts/form.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/form-controller.js"></script>
</body
app.js
angular.module('MyApp', ['ngCookies','ngResource', 'ngMessages', 'mgcrea.ngStrap', 'formApp'])
.config(['$locationProvider', '$stateProvider', function($locationProvider, $stateProvider){
$locationProvider.html5Mode(true);
console.log($stateProvider);
}]);
form.js
angular.module('formApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('.profile', {
url: '/profile',
templateUrl: 'views/form-profile.html'
})
// url will be /form/interests
.state('.interests', {
url: '/interests',
templateUrl: 'views/form-interests.html'
})
// url will be /form/payment
.state('.payment', {
url: '/payment',
templateUrl: 'views/form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/');
})
form-controller.js
// our controller for the form
// =============================================================================
angular.module('formApp')
.controller('formController', ['$scope', function($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function() {
alert('awesome!');
};
}]);
Your code is not following the tutorial exactly. Note that for child states to function, they must reference their parent state.
In the tutorial code:
.state('form.profile', {
In your code:
.state('.profile', {
If you change your child states to reference the parent, they will function correctly. i.e.
.state('home.profile', {
i have the problem that AngularJS refreshes full Page and not only the ng-view
my config:
myApp.config(function($httpProvider, $routeProvider) {
//ROUTE
$routeProvider.when('/', {
templateUrl : 'views/mainForm.html',
controller : 'TabController'
}).when('/login', {
templateUrl : 'views/loginForm.html',
controller : 'LoginController'
}).otherwise({
redirectTo : '/',
});
});
my index:
<body>
<!--NAVBAR -->
<navbarform></navbarform>
<!--Login oder MainView -->
<div class="container-fluid">
<div class="main">
<div ng-view></div>
</div>
</div>
If i click on my Navbar button: {{username}} its not opening the dropdown. its refresh the full page...
what i`m doing wrong?
First Check :-
Was ng-app set ?
Is the controller TabController loaded ?
Checked for other JS error in the page.
After that :-
Debug using Firebug & AngScope.
And even after this issue is not resolved create a JSfiddle and post the link here.
Hope this helps.