Writing and Loading Directives

[Dave Abbott]

First attempt at this and every tutorial I find the code / structure is all different so it makes it even worse. And everything as usual is in a single app.js file so thats no help either.

Basically there will be a lot of directives created to avoid the ng-controller usage.

But how is a simple say userName directive written and saved in the directives folder?

Where we drop <user-name></user-name> in a view and populate it with data from and API call. That's as basic real world I can think of

Do you need to load it in app.js :
angular.module('app', [
    'ngRoute',
    'ngResource',
    'ngStorage',
    'appRoutes',
    'userName',
    .....500 other directives?
 
  ])

All files are combined / minified

I really wish there was a real example of usage, naming conventions, folder structure, its all do it how ever, and there are guides to follow then the tutorials don't follow, don't say file names, where they are saved, how they are loaded if loaded and where....

For the <user-name> directive in guides half are prefixed with my-app-[directive name] other just directive-name, no reason noted why? Other directive function names are myAppUserList function() then others are userList function() why do people use myApp prefix naming? Is it supposed to be there? If so where is this noted / docs?

I thought a framework as with any thing "structured" would have a common design pattern to follow.
To me it seems like a pre-fabricated house that you can put together and if you like put the doors on the ceiling and windows on the floor, you probably should not but you can if you want type attitude.

[Vaibhav Gupta]

Hi,

I use yoeman to structure my project. It has convinient commands to generate directives, service, controllers etc. You might want to look into this.

Also, there are some styleguides for angularjs which can be refered to such as:

https://github.com/johnpapa/angular-styleguide

Regards,

Vaibhav Gupta

[Robert Zehnder]

If I am writing my own directives I usually just stick it in a myComponent.directive.js file in the directory that it associates to. Then I add script block to the main file to load it (index.html). I am just figuring all this out myself, so I feel your pain. I have a "hello world" type app I am building that might help you get on the right path.

https://github.com/robertz/D3Compare

There is a link to the app on the github repo, so you don't have to install anything to see it work..

[Dave]

One of the issues is names, some tutorials have angular.module(app).directive then others it with the [] then other times it's the directive name....no reason why? It just is. The docs are all basic and show nothing of real world usage. 

Code is just renewal, not correct syntax on iPad so it's just to roughly give the idea of what I mean

Sent from my rotary phone.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/I0lJ9Rvgxjo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Robert Zehnder]

Generally you only use

angular.module('app', []) when you are initializing your app. Afterwards, you can use the angular.module('app').directive(...) to add controllers, factories, directives etc. to the app (notice, no []). 

Also, one thing that is worth more than all the tutorials I have seen is John Papa's style guide which was mentioned before (https://github.com/johnpapa/angular-styleguide). He also has some great demos at https://github.com/johnpapa/ng-demos that have some good starting points for angular apps. When I was first learning to piece things together these two repos were priceless.