I've been trying to make this code that I inherited work for a couple of days now but I still got no luck. Admittedly I am still a beginner in Angular but I think I already did what I could.
I'm using Yeoman's angular generator and grunt. grunt serve works fine but grunt serve:dist doesn't. At first it has something to do with some of the partial templates not getting included into $templateCache but I already fixed it. The templates are now included in the final script.js and the network tab of chrome dev tools no longer reports 404s. Debugging ui-router in the dist version of the application gives me Unknown provider: aProvider <- a which is apparently not very helpful. This is turning into a guessing game really. Below are code snippets. I hope somebody can help me out. Any advice would be good.
index.html
<div id='main-container' ng-controller="AccountCtrl">
<div id='logged-in-container' ng-if="isLoggedIn"><!-- container-fluid -->
<div id='left-sidebar' class="col-lg-2 bg-dark-blue">
<div id='left-sidebar-navigation' ng-controller="SidebarNavigationCtrl">
<left-Sidebar-User-Profile></left-Sidebar-User-Profile>
<left-Sidebar-Navigation></left-Sidebar-Navigation>
</div>
</div>
<div id='main-container-body' class="col-lg-10" ui-view >
</div>
</div>
<div id='logged-off-container' ng-if="!isLoggedIn">
<div class="col-lg-12" ui-view >
</div>
</div>
</div>
Please note the directives left-Sidebar-User-Profile and left-Sidebar-Navigation works. Only the ui-view doesn't.
app.js
$stateProvider
.state('login', {
url:'/',
templateUrl: 'views/login.html',
controller: 'AccountCtrl',
controllerAs: 'main',
resolve: resolveLoggedIn
});
I already tried changing the code above to the format like views: { 'login': { url: ... } } which I believe is the correct thing but I got the same behavior so I reverted my changes.
Gruntfile.js is here as it's pretty long.
Thanks in advance folks.
This might be occuring because your angular code is not mininfication ready. For a better insight to the same, see this.
You should consider using something such as grunt-ng-annotate
Related
I am new to angular js
I want to create my project structure like this
- APPLICATION
-index.html
-app.js
-modules
-core
-controllers
-directive
-views
-core.app.js
-core.config.routes.js
-test
-controllers
-directive
-views
-test.app.js
-test.config.routes.js
Here core, test is different modules(ng-app)
I configure like Here
app.js
angular.module('mainapp',['mainapp.core','mainapp.test'])
core.app.js
angular.module('mainapp.core',[])
test.app.js
angular.module('mainapp.test',[])
Here I am gettiing problem that my core module states are not working properly . I am using $staeprovider(ui-views) for routing.
example
core.config.routes.js
angular.module('mainapp.core').config(function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('core', {
url: '/core',
templateUrl: 'modules/core/views/core.html',
})
.state('core.sidebar ', {
url: '^/sidebar ',
templateUrl: 'modules/core/views/core.sidebar .html'
})
});
test.config.routes.js
angular.module('mainapp.test').config(function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('core.sidebar .test', {
url: '^/test',
templateUrl: 'modules/core/views/test.html'
})
});
my html pages are
index.html
<div ng-app="mainapp">
<div ui-view= ""></div>
</div>
core.html
` <div>
<h1>I am designing jeader Here. it goes on tp of page</h1>
<div ui-view></div>
</div>`
core.sidebar .html
`<div>
<h2>It goes left side</h2>
<h1>I am designing sidebar Here</h1>
<div ui-view></div>
</div>`
till Here it's working fine. heaser, sider bar is loading $state at core.sidebar
Here I am getting problem it' not working
test.html
<div>
<h1>I am designing middle content Here</h1>
</div>
Please any one help me to solve the issue and build better approach for project structure
I recommend you look at the Angular Style Guide in how they recommend project structuring. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure-lift-principle
I really like their recommendation for using the LIFT approach:
Locating our code is easy
Identify code at a glance
Flat structure as long as we can
Try to stay DRY (Don’t Repeat Yourself) or T-DRY
In that spirit, you might just have a modules folder and then use a file naming convention to keep things organized. On my projects, I do this and use ng-structure prefixes. Example:
nx.core
controller.header
controller.footer
controller.app
routes
nx.admin
routes
controller.admin
directive.blah
Doing this, I was able to achieve both the flat organization as well as a quickly filtering by eye, what files I need. Then only drawback is if you use a shortcut in your IDE to quickly open files, you normally think in terms of FindingsController not via a prefix like controller.Findings.
Just my 2¢
For the last three weeks I had my Angular website working with ui-router and states.
Thus a state looks as follows:
.state('home', {
url: '/home',
templateUrl: '/templates/home.html',
controller:'HomeCtrl as home',
})
In the file home.html, the way I added an image was by simply pointing to the img folder as follows:
<img src="img/boo.png">
This worked all the time fine.
Now however, when I tried to run the page in my Cloud9, it said that it cannot find boo.png. However when I write:
<img src="../img/boo.png">
Then it works fine.
What could have happened that this sudden rewrite is needed?
I solved it by rewriting all
<img src="..">
to:
<img ng-src="..">
Don't know what happened, but it works fine now.
I'm trying to make a blog using AngularJS. The home page queries a third party service of mine that returns an array of all my articles/posts. I am displaying shortened versions of these posts on the home page, and want to have "read more" under each post that passes that post's ID through a URL parameter to another HTML page:
index.html:
<div ng-controller="blogCtrl" id="blog">
<div class="post" ng-repeat="post in posts">
<div class="header">
<h1>{{ post.fields.title }}</h1>
<p class="date">{{ post.sys.createdAt | date}}</p>
</div>
<p>{{ post.fields.body | cut:true:1600:' ...'}}</p>
read more
</div>
</div>
What do I need to do in post.html so that I can read the value of id in the URL parameter? Do I need to create a new angularJS app in post.html?
edit:
I've changed the read more link to <a href="post/{{post.sys.id}}"> and i am trying to set up the following route:
app.config(function($routeProvider){
$routeProvider
.when('/post/:postid',{
templateUrl: '/post.html',
controller: 'postCtrl'
})
});
However, clicking the "read more" link doesn't load up post.html, but instead a page that says File not found: /post/2B1K9K2DHqsYaGYcms2YeW. The route doesn't seem to be getting properly set up, since post.html isn't getting loaded.
This isn't all that hard to do, but you need to have routing set up on your app. You can create this functionality in your existing app, or separate it into a new one, it's up to you. Here are the relevant things you'll need to include in your code:
In your app include ngRoute as a dependency:
var myApp = angular.module('myApp', ['ngRoute']);
Also include routing config for your app:
myApp.config(function($routeProvider){
$routeProvider
.when('/someroute', {
templateUrl: 'someFolder/withSomeFile.html'
}
.when('/someroutewithparamters/:aftercolonisparameter', {
templateUrl: 'someFolder/post.html'
}
});
You can include a default route as well, but it's not necessary if you'd rather not. Be sure to include angular-route.js in your index.html for this to work.
Now in your controller you can simply do something like:
myApp.controller('postCtrl', function($routeParams, $scope, postFactory){
$scope.post = postFactory.functionToLoadPost($routeParams.aftercolonisparameter);
});
Obviously this will be different for your implementation based on how everything is set up, and you'll probably want to pick better names for your elements than I did, but those are the things you'll need in place to make this work. It's actually pretty straightforward.
So first off, I'm working on this for a project at work, but none of us have any idea how to do it, so it might be kind of vague.
Here is the template of how it is going to look: Template
So View A & B are going to have 3 states in them that will change the content of the view based on which one is selected
The problem I'm having is that only 1 view ever shows up and it is a test template for now because I don't have those views built but none of the sub views of View A ever show up.
HTML
<div id="main">
<div ui-view="viewa" class="col-sm-7">
<!--Content of ViewA supposed to be here-->
</div>
<div ui-view="viewb" class="col-sm-5">
<!--Content of ViewB supposed to be here-->
</div>
</div>
States:
$stateProvider.state("main", {
url: "/main",
views: {
"viewa#": {
abstract: true,
template: "<div ui-view></div>"
},
"viewb#": {
templateUrl: "btemps/default.html"
}
}
}).state("bobtheView", {
parent: "viewa",
//This is default for viewa
url: "/",
templateUrl: "atemps/bob.html",
controller: "bobController"
}).state("billtheview", {
parent: "viewa",
url: "/bill",
templateUrl: "atemps/bill.html",
controller: "billController"
}).state("joetheview", {
parent: "viewa",
url: "/joe",
templateUrl: "atemps/joe.html",
controller: "joeController"
});
//Supposed to route to viewa showing bobtheview and viewb showing the template
$urlRouterProvider.otherwise("/main/");
So when I go to the page and go to the root it redirects to the otherwise but nothing shows up, upon just going to main, only the viewb template shows up.
Any ideas? Any way I can format it better too? Is it better to go with "viewa.bobtheview" over having the parent attribute in the mix?
UPDATE: So I found a work around, I loaded each of the bobtheview, joetheview and billtheview in html partials, then I refactored it so the view state of viewa and viewb are controlled within a main template that includes the "ng-include" function to load the different templates, and since all of the data that is stored in those views is given via JSON rest requests, there is no change in the data bindings. The problem I'm facing now, is updating that "ng-include" on button click, I haven't done extensive research on it but I plan on doing so and I'll report back when/if I find something. If you have any ideas on this let me know! :D.
So I found a viable answer to the question at hand, after extensive research and asking around, I went with the option of having 1 Controller and configuration state
$stateProvider.state("main", {
url: "/",
controller: "mainController",
templateUrl: "temps/primary.html"
});
$urlRouterProvider.otherwise("/");
That went into the configuration settings, then my controller looked a little like this:
app.controller("mainController", ["$scope", "$state", "$stateParams", "$http", function($scope, $state, $stateParams, $http) {
$scope.viewatemp = $stateParams.at; //Numeric value to represent template url for viewa
$scope.viewbtemp = $stateParams.bt; //Numeric value to represent template url for viewb
//Do some other stuff here
});
Then the HTML of "temps/primary.html" looked a little something like this:
<div ui-view="viewa" class="col-sm-5" ng-include="viewatemp"></div>
<div ui-view="viewb" class="col-sm-7" ng-include="viewbtemp"></div>
I did a little manipulation of the numeric value of viewatemp and viewbtemp to get the actual URL, those are being loaded from a JSON request from my ASP.net WebApi 2 Restful service, but all in all, it is quick, rather simple and still gets the job done and allows for further enlargement of the project.
And that there in solved my problem, cool thing about this, I can have as many as these as I want because they are all separate states with nested "views"
If you do have a better answer, let me know! This is only what I found and what worked for me.
We are attempting to upgrade from AngularJS 1.0.7 to 1.2.1. In 1.0.7, we were able to set the controller for an ng-include alongside in the same element, like so
<div data-ng-include="'include1.html'" data-ng-controller="MyCtrl1"
MyCtrl1 would become available to the code inside include1.html.
This breaks when moving to AngularJS 1.2.1 which I have illustrated in this plunkr. If you change the referenced version to 1.0.7 it works again.
I am interested in understanding what has changed/why this is. I tried searching but couldn't find anything or I am not using the right terms.
Additionally, what would be the correct way to specify a controller for my ng-includes?
Why not move the ng-controller from the element having ng-include to inside the template:
index.html:
<div data-ng-include="'include1.html'"></div>
<div data-ng-include="'include2.html'"></div>
include1.html
<div data-ng-controller="MyCtrl1">
<h1>{{Username}}</h1>
</div>
include2.html
<div data-ng-controller="MyCtrl2">
<h1>{{Username}}</h1>
</div>
It seems ngController and ngInclude cannot be used in conjunction with each other since Angular version 1.2:
Issue 1, Issue 2, Issue 3 and SO post.