AngularJS Tips

gistfile1.txt

Angular apps are little separate kingdoms. You can't get into them from outside, and it's really frowned upon to use jQuery within them to access the DOM.

The loading order is somewhat important. I set it up like this: [jQuery, jQueryUI, Bootstrap, Underscore, Angular Library, *any Angular Plugins*, Angular Application init file, *rest of angular files*].

team.coffee

# Factory is angular for Model in MVC-speak
# @dispatched gets the application we setup in _init_app.coffee; 'Team' is the name of this model;
# the array param has the first n elements as the dependencies that become params for the last element,
# which defines and returns the model
@dispatched.factory 'Team', ['railsResourceFactory', 'railsSerializer', (railsResourceFactory, railsSerializer) ->
  # initialize the object
	Team = railsResourceFactory # using RailsResource for now, but plan to switch to [Angular-Data](http://angular-data.pseudobry.com/)
		url: (context) -> # this gets called to generate every request URL
		  # if we have an instance, use its ID for Show/Update/Delete/etc.
			if context[@idAttribute]?
				"/teams/#{context[@idAttribute]}.json"
			# otherwise we're working on the collection for Index/Create/Search/etc.
			else
				"/teams.json#{window.location.search}" # window.location.search is the query params like `?page=3&filter=pasta`
		# team is the root node for JSON serialization from the API
		# like: {'team':{name:'new orleans saints'}}
		name: 'team'
		extensions: ['snapshots'] # snapshots let us do undo
	
	# I can add functions to the model here, too
	# for example:
	Team.prototype.helloName = (name) ->
		"Hello, #{name}!"
		
	Team
]

teams.coffee

# Here's an example Controller. In Angular, Controllers and Controller/View hybrids in MVC-speak
# Every property of $scope is available as a variable in the View, including the functions
# The init syntax is similar to factory, except here we're depending on the Team model from team.coffee
@dispatched.controller('Teams', ['Team', '$scope', '$rootScope', (Team, $scope, $rootScope) ->
	$scope.page = 1
	$scope.teams = []
	$scope.hasMore = true
	$scope.loadingMore = false
	
	$scope.loadMore = ->
		return true if ! $scope.hasMore || $scope.loadingMore
		$scope.loadingMore = true
		NProgress.start()
		Team.query({page: $scope.page}).then (teams) ->
			for team in teams
				$scope.teams.push team
			$scope.page++
			$scope.hasMore = teams.length >= 25
			$scope.loadingMore = false
			NProgress.done()
	
	$scope.init = (teams) ->
		for team in teams
			$scope.teams.push new Team(team)
		$scope.page++
		$scope.hasMore = teams.length >= 25
		$rootScope.$on 'Teams.addedTeam', (event, team) ->
			$scope.teams.push team
		$rootScope.$on 'Teams.addedMember', (event, team, member) ->
			console.log 'addedMember', team, member
			team.members.push member
		$rootScope.$on 'Teams.removedMember', (event, team, member) ->
			console.log 'removedMember', team, member
			team.members.splice _.indexOf(member), 1

	$scope.newTeam = () ->
		team = new Team()
		$rootScope.$emit 'Teams.presentForm', team
		true

	$scope.editTeam = (team) ->
		$rootScope.$emit 'Teams.presentForm', team
		true
	
	$scope.deleteTeam = (team, $index) ->
		return false unless team.id?
		NProgress.start()
		team.delete().then ->
			$scope.teams.splice $index, 1
			NProgress.done()
		true
		
	$scope.editMembers = (team) ->
		$rootScope.$emit 'Teams.presentMemberForm', team
		true
		
])

1-team.coffee mentions a _init_app.coffee . Is that where you're setting the @dispatched variable?